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.
Jishnu V S
8,4377 gold badges30 silver badges59 bronze badges
asked Nov 30, 2016 at 9:23
Satsuki
2,1965 gold badges19 silver badges34 bronze badges
6 Answers 6
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
Sign up to request clarification or add additional context in comments.
Comments
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>
answered Nov 30, 2016 at 9:27
Pranav C Balan
115k25 gold badges173 silver badges195 bronze badges
3 Comments
Pranav C Balan
@Satsuki : glad to help you
Satsuki
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?
Pranav C Balan
@Satsuki : get value from textbox and update based on that
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.5k4 gold badges33 silver badges49 bronze badges
Comments
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,8211 gold badge30 silver badges46 bronze badges
Comments
<!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>
Comments
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>Comments
default