Changing html text with button click

Question

I got into js few days ago. I started playing with new stuff functions and events but I got stuck here

var str = ["A", "b", "c", "d", "e"];

function Generate() {
  var text = document.getElementById("text");
  var countStr = 0;
  text.innerHTML = str[countStr];
  countStr += 1;

}

<div id="quote">
  <p id="text">I'm a paragraph</p>
</div>
<button id="butt" onclick="Generate()">Generate</button>

when I click the button the text changes to str[0] but when I click again it doesn't change; can you tell me why ?

countStr is set to 0 every time you call the Generate function... — The_Black_Smurf
– The_Black_Smurf, Commented Jan 16, 2017 at 14:39
Move the countStr outside the function and make sure your countStr does not exceed str.length — mplungjan
– mplungjan, Commented Jan 16, 2017 at 14:39
@Closer - this contains the code necessary to show the problem — mplungjan
– mplungjan, Commented Jan 16, 2017 at 14:41
@Zied, what about accepting answer in order to help other people ? — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented Jun 8, 2017 at 10:23

Community · Accepted Answer · 2017-05-23 12:25:42Z

6

This behaviour exists because everytime you click button, countStr variable will be 0. You need to declare it outside the function.

var str = ["A", "b", "c", "d", "e"];
var countStr = 0;
function Generate() {
  var text = document.getElementById("text");  
  text.innerHTML = str[countStr];
  countStr += 1;

}

<div id="quote">
  <p id="text">Im a paragraph</p>
</div>
<button id="butt" onclick="Generate()">Generate</button>

Another method is to use a closure function.

Comments

Suren Srapyan · Accepted Answer · 2017-01-16 14:42:52Z

4

Because your countStr variable is local scoped. It means, when you call the function Generate(), it everytime creates a new countStr variable and set's it's value to 0 and for improvement put the document.getElementById("text") also outside the function.

Put it outside of the function.

var str = ["A", "b", "c", "d", "e"];
var countStr = 0;

var text = document.getElementById("text");

function Generate() {      
  text.innerHTML = str[countStr];
  countStr += 1;
}

<div id="quote">
  <p id="text">Im a paragraph</p>
</div>
<button id="butt" onclick="Generate()">Generate</button>

edited Jan 16, 2017 at 14:42

answered Jan 16, 2017 at 14:36

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

3 Comments

mplungjan Over a year ago

Probably someone voting before you finished your answer

youngtoken Over a year ago

sorry to bother you but i got another question :c is it possible to not use "onclick="generate()" in html and instead i use button.addEvenetListener("click",Generate(){}; ? does it work the same as the first one ?

Suren Srapyan Over a year ago

onclick="generate() will work in every browser, but addEvenetListener will not work in Internet Explorer. For IE you need to use attachEvent. But in global, they are the same, but the best practice is to use code attachment as the second case.

Collectives™ on Stack Overflow

Changing html text with button click

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related