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>
Related
I am a beginner in JavaScript. I have a table which shows details of a bill. Quantity can be filled in the form. Once I enter the quantities and submit the form, the bill will be calculated and display the price of each type, and the total. So how to insert values from input into an array?
<!--//Script.js
document.writeln("<table name=\"bill\" style=\"text-align:center\"><tr><th>Ice cream type</th><th>Name</th><th>Unit Price</th><th>quantity</th><th>Total</th><tr>");
var type = ["vanilla", "chocolote", "mango", "Butterscotch"];
var data = [70, 60, 80, 100];
for (var i = 0; i < 4; i++) {
document.writeln("<tr><td id=\"dx\" width=" + 200 + "px>type " + (i + 1) + "</td><td width=" + 100 + "px>" + type[i] + "</td><td>" + data[i] + "</td><td><input type=text></td><td id=a></td></tr>");
}
document.writeln("<tr ></tr><td id=p1 colspan=4 style=\"text-align:right\">total</td><td ></td></table>");
function myfunc() {
}
//-->
<h1 style="text-align:center">The Ice-Cream Shop</h1>
<center>
<p id="demo"></p>
<script type="text/javascript" src="Script.js">
</script>
<p><input type=button value=submit> <input type=button value=clear onclick="myfunc()"></p>
<p id=x></p>
</center>
To add all the values of all the text inputs on a page into an array, you do the following:
var array = [];
var inputs = document.getElementsByClassName("input");
for(var i = 0; i < inputs.length; i++){
if(inputs[i].type == "text"){
array[array.length] = inputs[i].value;
}
}
I've added a function calculate() which does the trick for you:
function calculate() {
const inputs = document.querySelectorAll("input[type=text]");
const arrayInputValues = Array.from(inputs).map(input => +input.value);
console.log(arrayInputValues);
}
Complete it by performing the required calculations. Below is a code snippet with this function applied.
Input values are strings so you need to convert it to integers. That's done via "+" prefix.
<!--//Script.js
document.writeln("<table name=\"bill\" style=\"text-align:center\"><tr><th>Ice cream type</th><th>Name</th><th>Unit Price</th><th>quantity</th><th>Total</th><tr>");
var type=["vanilla","chocolote","mango","Butterscotch"];
var data=[70,60,80,100];
for(var i=0;i<4;i++){
document.writeln("<tr><td id=\"dx\" width="+200+"px>type "+(i+1)+"</td><td width="+100+"px>"+type[i]+"</td><td>"+data[i]+"</td><td><input type=text></td><td id=a></td></tr>");
}
document.writeln("<tr ></tr><td id=p1 colspan=4 style=\"text-align:right\">total</td><td ></td></table>");
function calculate() {
const inputs = document.querySelectorAll("input[type=text]");
const arrayInputValues = Array.from(inputs).map(input => +input.value);
console.log(arrayInputValues);
}
function myfunc(){
}
//-->
<!DOCTYPE html>
<!--Bill.html-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Bill Payment</title>
<script type="text/javascript">
</script>
</head>
<body>
<h1 style="text-align:center">The Ice-Cream Shop</h1>
<center>
<p id="demo"></p>
<script type="text/javascript" src="Script.js" >
</script>
<p><input type=button value=submit onclick="calculate()"> <input type=button value=clear onclick="myfunc()"></p>
<p id=x></p>
</center>
</body>
</html>
I think the problem is you can not get value in that input text, so you need to set id for input and use DOM to get value
<input type='text' id='text"+ data[i] +"'>
After that when you click button will use, and you can do anything after that.
document.getElementByID('text1').value or text2... to get value
I want to convert this simple code that shows a multiplication table from java script ( using notepad++) to asp.net ( using visual studio// web form )
<!DOCTYPE html>
<html>
<head>
<meta charset="windows-1252">
</head>
<body>
<script>
document.write("<table border=\"1px\">");
var i, j;
for (i = 1; i <= 12; i++) {
document.write("<tr><th colspan=\"5\">Table" + " " + i + "</th></tr>");
for (j = 1; j <= 12; j++)
document.write("<tr><td>" + i + "</td>"+"<td>*</td>"+"<td>" + j + "</td>"+"<td>=</td>"+"<td>" + i * j + "</td></tr>");
}
document.write("</table>");
</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>
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 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>