Just to let you know I am a complete newbie,
I have a html page that shows different images combined. I am using javascript to select images to display.
Here's my code:
<head>
<script type="text/javascript">
var num1 = Math.ceil( Math.random() * 6 );
var num2 = Math.ceil( Math.random() * 6 );
var num3 = Math.ceil( Math.random() * 6 );
var num4 = Math.ceil( Math.random() * 6 );
var num5 = Math.ceil( Math.random() * 4 );
var imgpath1 = "<img src=" + '"' ;
var imgpath2= "./Nums24-38/Nums" + num5 + "_";
var imgpath3= ".png" + '"' ;
var imgpathA = imgpath1 + imgpath2 + num1 + imgpath3 ;
var imgpathB = imgpath1 + imgpath2 + num2 + imgpath3 ;
var imgpathC = imgpath1 + imgpath2 + num3 + imgpath3 ;
var imgpathD = imgpath1 + imgpath2 + num4 + imgpath3 ;
var imgpathE = imgpathA + imgpathB + imgpathC + imgpathD ;
</script>
</head>
<body>
<h1>Hello </h1>
<h2>Welcome to Home-brewed Captcha </h2>
My Random number is <script>document.write(num1); document.write(num2); document.write(num3);document.write(num4)</script>
<p> My path is <script>document.write(imgpath2); document.write(num1); document.write(imgpath3) </script></p>
<p>First Java Image is <script>document.write(imgpathA) </script> </p>
<p>Second Java Image is <script>document.write(imgpathB) </script> </p>
<p>Third Java Image is <script>document.write(imgpathC) </script> </p>
<p>Fourth Java Image is <script>document.write(imgpathD) </script> </p>
<p> Merged Java Image ABCD is
<script> document.write(imgpathA) </script>
<script> document.write(imgpathB) </script>
<script> document.write(imgpathC) </script>
<script> document.write(imgpathD) </script>
</p>
<p> New merged Java image A+B+C+D is<script>document.write(imgpathE) </script> </p>
<h3>Another merge , this time bypassing java <img src="./Nums24-38/Nums3_3.png"><img src="./Nums24-38/Nums3_1.png"><img src="./Nums24-38/Nums3_0.png"><img src="./Nums24-38/Nums3_6.png"></h3>
</body>
You can see a live demo at http://sopariwala.ca/1.html
Why does all images dont show up.
Where am I going wrong.
Muja
Simple... You are using document.write() incorrectly!
str = 'abcd.png'
dcument.write(str)
// result is:
// abcd.png
All you are doing is 'writing' the url of the image to the page.
Try this if you must, though I don't reccomend it over inserting the tags outright:
document.write('<img src="abcd.png"/>')
Related
I put my JavaScript inside tags instead of externally(because external files weren't working) and for some reason my code is not running.
Just to be sure that it wasn't a problem with the code itself, I put a simple alert before all the code and nothing popped up.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id = "first" class = "oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type = "text" placeholder = "Enter Kelvin here" id = "kinput">
<button id = "ksubmit">Submit Kelvin</button><br><br>
<textarea id = "fpopup" rows = "5" cols = "50"></textarea>
</div>
<div id = "second" class = "oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type = "text" placeholder = "Enter Fahrenheit here" id = "finput">
<button id = "fsubmit">Submit Fahrenheit</button><br><br>
<textarea id = "kpopup" rows = "5" cols = "50"></textarea>
</div>
<script>
alert("Hello World"); //Testing JS
if(6==6){
alert("ua");
}
function ftok(f){
k = (f − 32) * 5/9 + 273.15;
return k;
}
function ktof(k){
f = (K − 273.15) * 9/5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
</script>
</body>
</html>
You can use DOMContentLoaded function to make sure the HTML is ready and parsed properly. Also you have some syntax errors which i have fixed as well.
Also, You were using some weird minus and multiplication characters.
The DOMContentLoaded event fires when the initial HTML document has been completely loaded and parsed
Your code is now working as expected.
Live Demo:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Fahrenheit/Kelvin Converter</h1>
<div id="first" class="oneof">
<h2>Kelvin to Fahrenheit</h2>
<input type="text" placeholder="Enter Kelvin here" id="kinput">
<button id="ksubmit">Submit Kelvin</button><br><br>
<textarea id="fpopup" rows="5" cols="50"></textarea>
</div>
<div id="second" class="oneof">
<h2>Fahrenheit to Kelvin</h2>
<input type="text" placeholder="Enter Fahrenheit here" id="finput">
<button id="fsubmit">Submit Fahrenheit</button><br><br>
<textarea id="kpopup" rows="5" cols="50"></textarea>
</div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
if (6 == 6) {
alert("ua");
}
function ftok(f) {
var k = (f - 32) * 5 / 9 + 273.15;
return k;
}
function ktof(k) {
var f = (k - 273.15) * 9 / 5 + 32;
return f;
}
document.getElementById("ksubmit").onclick = function() {
document.getElementById("fpopup").value = document.getElementById("kinput").value + " degrees Kelvin is " + ktof(Number(document.getElementById("kinput").value)) + " degrees Fahrenheit"
}
document.getElementById("fsubmit").onclick = function() {
document.getElementById("kpopup").value = document.getElementById("finput").value + " degrees Fahrenheit is " + ftok(Number(document.getElementById("finput").value)) + " degrees Kelvin"
}
})
</script>
</body>
</html>
In my project I need to see sensors data in textarea window
and after some time to save those data in txt file.
I use this code :
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
var updateInterval = 50;
var updateChart = function(count) {
count = count || 1;
Val1 = Math.floor((Math.random() * 100) + 1);
Val2 = Math.floor((Math.random() * 100) + 1);
Val3 = Math.floor((Math.random() * 100) + 1);
$(document).ready(function() {
var $textarea = $('textarea');
$textarea.scrollTop($textarea[0].scrollHeight);
});
var d = new Date();
$("#output").append(document.createTextNode(d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + " - , " + Val1 + ", " + Val2 + ", " + Val3 + "\n"));
}
setInterval(function() {
updateChart()
}, updateInterval);
function download(filename, text) {
var pom = document.createElement('a');
pom.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
pom.setAttribute('download', filename);
pom.style.display = 'none';
document.body.appendChild(pom);
pom.click();
document.body.removeChild(pom);
}
</script>
</head>
<body>
<form onsubmit="download(this['name'].value, this['text'].value)">
Filename: <input type="text" name="name" value=" .txt">
<textarea id='output' cols="40" rows="10" name="text" style="border:solid 2px blue;">
Time ,Val1, Val2, Val3
</textarea>
<input type="submit" value="SAVE">
</form>
</body>
</html>`
The problem is in the fact: my code execution speed is slower and slower if time
between start and file saving moment is longer !
If I use 20 samples/sec this amount of slowdown is not acceptable.
Is it possible to get faster code and much less dependent of time (txt file size) ?
just to clarify my question, i need to generate a 2 digits numbers separately to make it set of 6 like this "12,45,24,63,64,1"
<html>
<head>
<title>lotto picker</title>
</head>
<body>
<p> I can generate you a lotto numbers to bet right now!</p>
<button id="generateButton">Generate!</button>
<script type="text/javascript">
document.getElementById("generateButton").onclick = function() {
var msg = " ";
var lottoNum = Math.floor((Math.random() * 64) + 1);
alert(lottoNum);
}
</script>
</body>
</html>
To generate 6 2-digit number you need to loop six times. Below is the program to generate 6 2-digit number
document.getElementById("generateButton").onclick = function() {
var msg = " ";
for(var i = 0 ;i < 6 ; ++i) {
var lottoNum = Math.floor(Math.random() * 89) + 10;
msg += lottoNum + ",";
}
msg = msg.slice(0, -1);
alert(msg);
}
<html>
<head>
<title>lotto picker</title>
</head>
<body>
<p> I can generate you a lotto numbers to bet right now!</p>
<button id="generateButton">Generate!</button>
</body>
Here 10 to 89 is the desired range.
Where:
10 is the start number
89 is the number of possible results (10 + start (89) - end (10))
document.getElementById("generateButton").onclick = function() {
var msg = " ";
for(var i = 0 ;i < 6 ; ++i) {
var lottoNum = Math.floor(Math.random() *89) + 10;
msg += lottoNum + ", ";
}
msg = msg.slice(0, -1);
alert(msg);
}
<html>
<head>
<title>lotto picker</title>
</head>
<body>
<p> I can generate you a lotto numbers to bet right now!</p>
<button id="generateButton">Generate!</button>
</body>
pretty new to javascript and doing some examples from a book, can't understand why this isn't producing any text strings on the page when loaded.
function init()
{
var sum = 80 + 20;
var sub = sum - 50;
var mul = sum * 5;
var div = sum / 4;
var mod = sum % 2;
var inc = ++sum;
var dec = --sum;
var str = "Sum: " + sum;
str += "<br>Subtraction: " + sub;
str += "<br>Multiplication: " + mul;
str += "<br>Division: " + div;
str += "<br>Modulus: " + mod;
str += "<br>Increment: " + inc;
str += "<br>Decrement: " + dec;
document.getElementById( "Panel" ).innerHTML = str;
}
document.addEventListener("DOMContentLoaded" , init , false);
And the html5 code;
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="arithmetic.js"></script>
<title>Doing Arithmetic</title>
</head>
<body>
<div id="panel"> </div>
</body>
</html>
Your <div> has an id of panel, not Panel. The IDs need to match. So you can either change the JavaScript code:
document.getElementById( "panel" )
or the HTML:
<div id="Panel"> </div>
Replace
<div id="panel"> </div>
with
<div id="Panel"> </div>
and it will work. P in panel should be capital.
I am supposed to make this simple program. It produces a multiplication problem, and when the user types the correct answer, it is supposed to produce another question. Instead it goes into an infinite loop and never stops, the answer field and the button go away. Also, I am supposed to make the comment about the users answer, one of 4 different sayings. Without using Arrays how would I do that?
My professor is no help, really getting aggravated as I have no where else to turn.
<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;
function problem() {
number1 = Math.floor(1 + Math.random() * 9);
number2 = Math.floor(1 + Math.random() * 9);
document.writeln("How much is " + number1 + " times " + number2 + " ?");
answer2 = (number1 * number2);
}
function answer1() {
var statusDiv = document.getElementById("status");
answer3 = document.getElementById("answer").value;
if (answer3 != answer2) statusDiv.innerHTML = "No. Please try again";
else if (answer3 == answer2) {
statusDiv.innerHTML = "Very good!";
problem();
}
}
problem();
</script>
</head>
<body>
<form>
<input id="answer" type="text" />
<input type="button" value="Solve!" onclick="answer1()" />
<div id ="status">Click the Solve button to Solve the problem</div>
</form>
</body>
</html>
simply put, document.writeln("How much is " + number1 + " times " + number2 + " ?"); erases all content on the then writes the string. So you're loosing all your form inputs.
The reason it doesn't happen on the initial page load is because the call to document.writeln happens before the form elements load.
Try this:
<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;
function problem()
{
number1 = Math.floor( 1 + Math.random() * 9 );
number2 = Math.floor( 1 + Math.random() * 9 );
document.getElementById("prompt").innerHTML = "How much is " + number1 + " times " + number2 + " ?";
answer2 = (number1*number2);
}
function answer1()
{
var statusDiv = document.getElementById("status");
answer3=document.getElementById("answer").value;
if(answer3 != answer2)
statusDiv.innerHTML="No. Please try again";
else
if (answer3==answer2)
{
statusDiv.innerHTML="Very good!";
problem();
}}
</script>
</head>
<body onload="problem();">
<form>
<div id ="prompt"></div>
<input id="answer" type="text" />
<input type="button" value="Solve!" onclick="answer1()" />
<div id ="status">Click the Solve button to Solve the problem</div>
</form>
</body>
</html>
There is no infinite loop, but document.writeln causes problems.
I suggest you set the question the same way as you set the other messages.
I think the problem is with the document.writeln.
You have a div for the question instead and then assing the question as innerHTMl to that div.
Try this:
<html>
<title>HW 9.27 and 9.28</title>
<head>
<script type="text/javascript">
var number1;
var number2;
var answer3;
var answer2;
function problem()
{
number1 = Math.floor( 1 + Math.random() * 9 );
number2 = Math.floor( 1 + Math.random() * 9 );
var question = document.getElementById("question");
question.innerHTML = "How much is " + number1 + " times " + number2 + " ?";
answer2 = (number1*number2);
}
function answer1()
{
var statusDiv = document.getElementById("status");
answer3=document.getElementById("answer").value;
if(answer3 != answer2)
statusDiv.innerHTML="No. Please try again";
else
if (answer3==answer2)
{
statusDiv.innerHTML="Very good!";
document.getElementById("answer").value = "";
problem();
}
}
</script>
</head>
<body>
<form>
<div id ="question"></div>
<input id="answer" type="text" />
<input type="button" value="Solve!" onclick="answer1()" />
<div id ="status">Click the Solve button to Solve the problem</div>
</form>
<script type="text/javascript">
problem();
</script>
</body>
</html>
You have a few issues:
First of all when you click the Solve button your answer1 function is not getting called.
I recommend not using onclick in HTML, but adding:
document.getElementById("solve").onclick = answer1;
to your JavaScript.
Also, you're comparing String input to a number. That's not going to work. You need to convert the input to a Number. Use parseInt(answer3,10) the 10 means base 10, and will make sure that 06 is interpreted as 6 instead of as an octal.
Also I would not use if and then else if. Just use if and then else so:
if (parseInt(answer3,10) === answer2){
//got it right!
}
else {
///got it wrong
}
Also don't use document.writeln. It's erasing stuff on your page. Create a div: <div id="problem"></div> and fill it with:
problemDiv.innerHTML = "How much is " + number1 + " times " + number2 + " ?";
You should also rename your variables. Your variable names are ambiguous.
Good luck!
Stuff to read:
Learn about parseInt
Why not to use document.write
The proper way to attach event handlers
Try it out!