innerHTML basic, adding numbers in loop

Question

I have trouble with javascript. I want to make it so that if I click on the adding candy button. It states There are 2 candy. If I click again it says There are 3 candy. What is the fastest way to do it using innerHTML?

function add() {
  var d = document.getElementById('idd').innerHTML;
  d = d + '<li>There is a candy</li>';
  document.getElementById('idd').innerHTML = d;
}

<body>
  <h1>Adding</h1>
  <p><input type="button" value="adding candy" onclick="add();"></p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>

This is giving me a head ache all day long.

GraveyardQueen · Accepted Answer · 2016-11-30 09:27:12Z

3

This will work perfectly

you will have to declare a global variable so that the number of clicks is added up every time on click and displayed using innerHTML

 <body>
    <h1>Adding</h1>
    <p><input type="button" value="adding candy" onclick="add();"></p>
    <ul id="idd">
      <li>There is a candy.</li>
    </ul>
  </body>

<script>
  var d=0;
function add() {
  d =d+1; 
  document.getElementById('idd').innerHTML = '<li>There are '+d+' candy</li>';
}
  </script>

answered Nov 30, 2016 at 9:27

GraveyardQueen

7691 gold badge7 silver badges17 bronze badges

Add a comment |

Pranav C Balan · Accepted Answer · 2016-11-30 09:34:38Z

Generate new li element with content based on count of li and append it to the ul.

function add() {
  // get the `ul` using id
  var d = document.getElementById('idd');
  // get count of `li` 
  var count = d.getElementsByTagName('li').length + 1;
  // create an li element
  var li = document.createElement('li');
  // add content to li based on count
  li.innerHTML = 'There is ' + (count) + ' candy.';
  // append generated li element to the ul
  d.appendChild(li)
}

<body>
  <h1>Adding</h1>
  <p>
    <input type="button" value="adding candy" onclick="add();">
  </p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>

UPDATE : If you are trying to update the same li content then do it using a global variable.

var count = 1;

function add() {
  // get the li
  var d = document.querySelector('#idd li');
  // update content by based on count variable value
  d.innerHTML = 'There is ' + (++count) + ' candy.';
}

<body>
  <h1>Adding</h1>
  <p>
    <input type="button" value="adding candy" onclick="add();">
  </p>
  <ul id="idd">
    <li>There is a candy.</li>
  </ul>
</body>

Hello what will I do when I make a text box and when I enter 100 it would produce There is 100 candy. would it be while or for? — Satsuki, Commented Nov 30, 2016 at 11:16

user3297291 · Accepted Answer · 2016-11-30 09:27:10Z

1

You keep track of the clicks in a variable outside the function:

var candy = 1;

function add() {
  var element = document.getElementById('idd');
  
  // Increment candy
  candy = candy + 1;
  
  // Replace text
  element.innerHTML = '<li>There is ' + candy + ' candy</li>'
}

<h1>Adding</h1>
<p><input type="button" value="adding candy" onclick="add();"></p>
<ul id="idd">
  <li>There is a candy.</li>
</ul>

answered Nov 30, 2016 at 9:27

user3297291

23.4k4 gold badges33 silver badges48 bronze badges

Add a comment |

Alexis · Accepted Answer · 2016-11-30 09:29:19Z

0

I think the best way is to add a container around your HTML value and change it when you call your function.

Example

var nbCandy=0;
function add()
{
  document.getElementById("candy-nbr").innerHTML = ++nbCandy == 1 ? "a" : nbCandy;
}

<button onclick="add()">
  Add a candy
</button>
<div>
  There is <span id="candy-nbr">0</span> candy
</div>

answered Nov 30, 2016 at 9:29

Alexis

5,8311 gold badge29 silver badges46 bronze badges

Add a comment |

alifallahi · Accepted Answer · 2016-11-30 09:29:59Z

0

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
var counter = 0;
function add() {
counter ++;
document.getElementById("idd").innerHTML = counter;
}

</script>

</head>
 <body>
    <h1>Adding</h1>
    <button onclick="add()">
    adding candy
    </button>
     <a id="idd"></a>
      <a>There is a candy.</a>
  </body>
</html>

answered Nov 30, 2016 at 9:29

alifallahi

3301 silver badge9 bronze badges

Add a comment |

Mahi · Accepted Answer · 2016-11-30 09:33:53Z

-1

function add() {
  var d = document.getElementById('idd').innerHTML;
  
  var f=((document.getElementById('idd').children.length)+1);
  d = d + '<li>There is '+ f+ 'candy</li>';
  document.getElementById('idd').innerHTML = d;
}

<h1>Adding</h1>
    <p><input type="button" value="adding candy" onclick="add();"></p>
    <ul id="idd">
      <li>There is a candy.</li>
    </ul>

edited Nov 30, 2016 at 9:33

answered Nov 30, 2016 at 9:25

Mahi

1,72513 silver badges22 bronze badges

Add a comment |

Collectives™ on Stack Overflow

innerHTML basic, adding numbers in loop

6 Answers 6

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Related