This question already has answers here:
using innerHTML in a loop is not properly displaying the set of json results
(4 answers)
Closed 5 years ago.
I wanne count to 100 in a div only using javascript. Why does only comes the last number.
Here is my code:
function test() {
for (var x = 1; x < 101; x++) {
document.getElementById("demo").innerHTML = (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
change document.getElementById("demo").innerHTML += (x + "<br />"); this line
function test() {
for (var x = 1; x < 101; x++) {
document.getElementById("demo").innerHTML += (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
Because the keep overriding the contents of the div with id "demo" by using innerHTML. You need to append the new number.
Please see this example (I updated your code).
function test() {
for (var x = 1; x < 101; x++) {
var current_contents = document.getElementById("demo").innerHTML;
document.getElementById("demo").innerHTML = current_contents + (x + "<br />");
}
}function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<html>
<head>
<script src="function.js"></script>
</head>
<body>
<button type="button" onclick="test()">100</button>
<button type="button" onclick="leer()">Delete</button>
<div id="demo">
</div>
</body>
</html>
Because it happens so fast that you only see the last number. Do something like this:
var _counter = 1;
var _timer = null;
function test() {
_counter = 1;
_timer = setInterval(function(){
document.getElementById("demo").innerHTML = (_counter + "<br />");
_counter++;
if(_counter > 100) clearInterval(_timer);
}, 1000);
}
function leer() {
document.getElementById("demo").innerHTML = "Delete"
}
<div id="demo"></div>
<button onclick="test();">Count</button>
<button onclick="leer();">Delete</button>
Try using .append instead of .innerHTML
Related
I am a beginner with Javascript/programming and I am trying to make the "demo2" id change with the 5, 10 or 15 variable chosen in the functions (trigger by the buttons), but it keeps showing "0". What do I have to do?
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative1()">5</button>
<button onclick="alternative2()">10</button>
<button onclick="alternative3()">15</button>
<p id="demo"></p>
<p id="demo2"></p>
<script>
var x = 0;
var y = 0;
function alternative1() {y = x + 5;
document.getElementById("demo").innerHTML = "You have chosen " + y;
}
function alternative2() {y = x + 10;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
function alternative3() {y = x + 15;
document.getElementById("demo").innerHTML = "You have chosen "+ y;
}
document.getElementById("demo2").innerHTML = y;
</script>
</body>
</html>
You can’t access variables declared inside a function from outside a function. The variable belongs to the function’s scope only, not the global scope.
It is normal that there is zero because in 'y' there is zero and no operation performed on y.
I hope that this answer will help you to understand what you have done.
You don't need 3 functions for this. You can do it with 1.
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(this)">5</button>
<button onclick="alternative(this)">10</button>
<button onclick="alternative(this)">15</button>
<p id="demo"></p>
<script>
function alternative(obj) {
document.getElementById("demo").innerHTML = "You have chosen " + obj.innerHTML;
}
</script>
</body>
</html>
Happy learning
You need to change 'demo2 inner' after every operation and need to add new value to 'y' current value (use +=)
var x = 0;
var y = 0;
function alternative(param) {
y += x + param;
document.getElementById("demo").innerHTML="You have chosen "+ param;
document.getElementById("demo2").innerHTML = y;
}
<!DOCTYPE html>
<html>
<body>
<button onclick="alternative(5)">5</button>
<button onclick="alternative(10)">10</button>
<button onclick="alternative(15)">15</button>
<p id="demo"></p>
<p id="demo2"></p>
</body>
</html>
I'm very new at all of this and I need to create a JavaScript for loop that prints out the numbers 1 to 10 when a button is clicked and -1 to -10 when another button is clicked as the attached screenshot shows.
I've done this but I'm very stuck.
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>Press PLUS to display +1 to +10:
<button onclick="plus()">PLUS</button>
<p>Press MINUS to display -1 to -10:
<button onclick="myFunction()">MINUS</button>
<p id="i"></p>
<script>
for (i = 1; i <= 10; i++)
{
document.write("i" + < br > );
}
</script>
</body>
</html>
Try this
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>
Press PLUS to display +1 to +10: <button onclick="plus()">PLUS</button>
</p>
<p>
Press MINUS to display -1 to -10:
<button onclick="minus()">MINUS</button>
</p>
<p id="i"></p>
<script>
function minus() {
for (i = -1; i >= -10; i--) {
document.getElementById("i").innerHTML =
document.getElementById("i").innerHTML + `${i} <br>`;
}
}
function plus() {
for (i = 1; i <= 10; i++) {
document.getElementById("i").innerHTML =
document.getElementById("i").innerHTML + `${i} <br>`;
}
}
</script>
</body>
</html>
I don't know if you want it to add a number every time you click or add them all in just one click, but I did this:
<!DOCTYPE html>
<html>
<body>
<h1>For loop statement exercise</h1>
<p>Press PLUS to display +1 to +10:</p>
<button onclick="plus()">PLUS</button>
<p id="+"></p>
<p>Press MINUS to display -1 to -10:</p>
<button onclick="minus()">MINUS</button>
<p id="-"></p>
<script>
function plus() {
for(let i = 1; i <= 10; i++) {
document.getElementById("+").innerHTML += i + " ";
}
}
function minus() {
for(let i = -1; i >= -10; i--) {
document.getElementById("-").innerHTML += i + " ";
}
}
</script>
</body>
</html>
What is the problem here when I click the buttons that are supposed to change the value?
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1();">Click me to change number</button>
<button type="button" onclick="f2();">Click me to change sentence</button>
<center>
<script type="text/javascript">
function f1()
{
if (x == 45)
{
x = 32;
}
}
function f2()
{
if (j == " I like pancakes")
{
j = " I don't like pancakes";
}
}
document.write(x);
document.write(j);
</script>
</center>
</body>
</html>
You can change the value of these variables just the way you've done it. However, the document.write won't be re-run automatically. The text you see on the page won't change, even though the variables have been updated.
Try using DOM to modify the content of the page when your event handler runs.
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1();">Click me to change number</button>
<button type="button" onclick="f2();">Click me to change sentence</button>
<center>
<script type="text/javascript">
function update()
{
document.getElementById('output').innerHTML = x + j;
}
function f1()
{
if (x == 45)
{
x = 32;
}
update();
}
function f2()
{
if (j == " I like pancakes")
{
j = " I don't like pancakes";
}
update();
}
document.write('<span id="output">');
document.write(x);
document.write(j);
document.write('</span>');
</script>
</center>
</body>
</html>
Try this:
<html>
<head>
<script type="text/javascript">
var x = 45;
var j = " I love pancakes";
</script>
</head>
<body>
<button type="button" onclick="f1()">Click me to change number</button>
<button type="button" onclick="f2()">Click me to change sentence</button>
<p id="sentence"></p>
<center>
<script type="text/javascript">
document.getElementById("sentence").innerHTML=x+j;
function f1(){
if (x == 45){
x = 32;
} else {
x = 45;
}
document.getElementById("sentence").innerHTML=x+j;
}
function f2(){
if (j == " I like pancakes"){
j = " I don't like pancakes";
} else {
j = " I like pancakes";
}
document.getElementById("sentence").innerHTML=x+j;
}
</script>
</center>
</body>
</html>
it uses the innerHTML property to change the content
There was also another problem:
the write function were outside the function so it's never called
I want to display a particular image as many times as the number given by user.This part is accomplished. But i want to display a number below each image. For example if user input is 4, there should be 4 images with '1' below 1st image '2' below second. The image must also be clickable.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>
<div id="demo">
<script>
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var c="<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
var arr = [];
for (var i = 0; i < x; i++) {
arr.push(c);
document.getElementById("demo").innerHTML = arr.join("  ");
}
}
</script>
</body>
</html>
var imageSrc = "http://fc08.deviantart.net/fs71/f/2010/148/1/9/20x20_PNG_Icons_DOMO_by_JMcIvor.png";
function imag(c,x) {
var x = document.getElementById("myNumber").value;
var demo = document.getElementById("demo");
var container = document.createElement("div");
container.setAttribute("class", "container");
for(var i=0; i<x; i++) {
var image = document.createElement("img");
image.setAttribute("class", "image");
image.setAttribute("src", imageSrc);
container.appendChild(image);
var text = document.createElement("div");
text.innerHTML = i+1;
container.appendChild(text);
demo.appendChild(container);
}
}
#demo {
}
.container {
}
.image {
}
.text {
}
<!DOCTYPE html>
<html>
<body>
<p>Click the button to add a new element to the array.</p>
<input type="number" id="myNumber" value="">
<button onclick="imag()">Try it</button>
<div id="demo"></div>
</body>
</html>
I just use another image url to test the code, replace it with your one. I hope this helps.
You already have the number you're looking for in your loop. So you can simply add it to your array like this.
JS:
function imag() {
var x = document.getElementById("myNumber").value;
var c = "<img src='C:/Users/Akhil/Desktop/New folder/G.jpg'/>";
var arr = [];
for (var i = 0; i < x; i++) {
arr.push("<div class='image'>" + c + "<br />" + (i+1) + "</div>");
}
document.getElementById("demo").innerHTML = arr.join("  ");
}
CSS:
div.image {
display: inline-block;
}
I'm not sure if the title makes sense, but I'm trying to dynamically change the value of a variable in a loop through a text input.
Take a look at my code so far
<script type="text/javascript">
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
for(count = 0; count < 5; count++, str += plus){
document.write("<br />");
document.write(str);
}
};
</script>
<input type="text" id="inputter" name="inputter"></form>
<button id="sub" type="button" onclick="test()">Try It Out</button>
so if you hit the button with whatever you put in as a value in the text field, say for example... You put "X" the result would be...
X
XX
XXX
XXXX
XXXXX
but then the form field disappears and I would have to refresh the page to do it again? Is there a way I can do this dynamically? So without refreshing, I would like to be able to type in a new string, and it would change.
Thanks in advance!
document.write() is overwriting your page. Don't use it, use DOM modification functions to put the string in a DIV.
<input type="text" id="inputter" name="inputter"></form>
<button id="sub" type="button" onclick="test()">Try It Out</button>
<div id="output"></div>
<script>
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
var output = '';
for(count = 0; count < 5; count++, str += plus) {
output += "<br />" + str;
}
document.getElementById('output').innerHTML = output;
};
</script>
DEMO
use a div and fill with data:
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<form>
<input type="text" id="inputter" name="inputter">
<button id="sub" type="button" onclick="test()">Try It Out</button>
</form>
<div id="theText"></div>
<script type="text/javascript">
function test() {
var count;
var str = document.getElementById('inputter').value;
var plus = str;
var theText = document.getElementById('theText');
for (count = 0; count < 5; count++) {
str += plus;
theText.innerHTML = theText.innerHTML + str + '<br/>';
}
};
</script>
</body>
</html>
Do you mean something like this?:
var str;
function test() {
var str += document.getElementById('inputter').value;
document.write("<br />");
document.write(str);
}