Changing value of a span using JavaScript

Question

I have an html with a span like this:

<span class="className">0</span> and it should display: 0

The problem is, how could I add a value (e.g. when value is 2, it will become 3) to the span by clicking a button and by doing it using javascript.

score 2 · Accepted Answer · edited May 23 '17 at 11:58

2

You can modify the content of any HTMLElement using:

look at this snippet:

document.addEventListener("DOMContentLoaded", function(){
   var button = document.querySelector("#mybutton");
   var span = document.querySelector(".className");
  
   button.onclick = function() {
     span.textContent= parseInt(span.textContent, 10) + 1;
   }
  
});

<span class="className">0</span>
<button id="mybutton">add</button>

EDIT: If you want to use onclick="" which I don't recommend, you could do something like this:

var myFunction = function() {
   var span = document.querySelector(".className");  
   span.textContent= parseInt(span.textContent, 10) + 1;  
}

<span class="className">0</span>
<button id="mybutton" onclick="myFunction()">add</button>

edited May 23 '17 at 11:58

Community

1
1

answered Oct 30 '15 at 02:33

Santiago Hernández

5,438
2
26
34

It isn't working for me. The span value was still 0. – Lloyd Dominic Oct 30 '15 at 02:54
How if, I am assigning an `onclick=""` to the button? – Lloyd Dominic Oct 30 '15 at 03:10
for that you need to declare a named function in your global namespace, and call it inside the button's onclick attribute, look at the edited answer – Santiago Hernández Oct 30 '15 at 03:22

Changing value of a span using JavaScript

1 Answers1