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.
Related
I would like to know if my indentation for this file is correct or not because my result that I got is not aline together (not straight).
<html>
<head>
<title>Javascript for Loop</title>
</head>
<body>
<pre>
<script type = "text/javascript" >
let x = 5;
do {
document.write("do while Looping " + x + "\n");
x++;
} while (x < 10)
</script>
</pre>
</body>
</html>
Result:
You need to remove the text between the <pre> and the <script>:
<html>
<head>
<title>Javascript for Loop</title>
</head>
<body>
<pre><script type = "text/javascript" >
let x = 5;
do {
document.write("do while Looping " + x + "\n");
x++;
} while (x < 10)
</script>
</pre>
</body>
</html>
Or, even better, avoid document.write entirely:
let text = '';
let x = 5;
do {
text += "do while Looping " + x + "\n";
x++;
} while (x < 10)
document.querySelector('pre').textContent = text;
<pre></pre>
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>
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>
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"/>')
I am trying to get tweets from different zip codes.For doing this, I am using latitude and longitude values for each zip code. So far I want to get 3 tweets for each zip code(I have 2 zip codes), but it is working only for one zip code.
Any suggestion will be appreciated. Thank you in advance!
Here is my code:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat=[41.9716,42.0411];
var lng=[-87.7026,-87.6900];
$(document).ready(function() {
for(var i=1; i<2; i++)
{
$.getJSON('http://search.twitter.com/search.json?q=business&geocode='+lat[i]+','+lng[i]+',5mi&lang=en&callback=?', function(data) {
var data = data.results;
var html = "";
for(var j=0; j<3;j++){
html += "<div style='width:600px;border:solid thin blue'><img src='"+data[j].profile_image_url+"'/><a href='http://twitter.com/" + data[j].from_user + "'>#"+ data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content'+i).html(html);
}); }
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
I found 2 problems with your code:
1) If you want to iterate 2 times, your for function should be like this: for (var i = 0; i < 2; i++)
2) You must have in consideration that the function that gets called in $.getJSON runs asynchronously, so when that function gets called the for will have already finished, therefore you can't use the i value with that purpose inside that function.
So, after correcting those 2 things in your code you should be able to get what you want. Try with something like this:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
var lat = [41.9716, 42.0411];
var lng = [-87.7026, -87.6900];
var count = 1;
$(document).ready(function () {
for (var i = 0; i < 2; i++) {
$.getJSON('http://search.twitter.com/search.json?q=business&geocode=' + lat[i] + ',' + lng[i] + ',5mi&lang=en&callback=?', function (data) {
var data = data.results;
var html = "";
for (var j = 0; j < 3; j++) {
html += "<div style='width:600px;border:solid thin blue'><img src='" + data[j].profile_image_url + "'/><a href='http://twitter.com/" + data[j].from_user + "'>#" + data[j].from_user + "</a>: " + data[j].text + "</div>";
}
$('.content' + count++).html(html);
});
}
});
</script>
</head>
<body>
<div class="content1"></div>
<div class="content2"></div>
</body>
</html>