Изменение html-текста нажатием кнопки

Question

Я попал в js несколько дней назад. Я начал играть с новыми функциями вещи и события, но я застрял здесь

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>

при нажатии на кнопку текст меняется к Силе [0], но когда я нажимаю снова не изменяется ; можешь мне сказать почему ?

Answer 1

Поскольку ваша переменная countStr является локальной областью. Это означает, что когда вы вызываете функцию Generate(), она каждый раз создает новую переменную countStr и устанавливает ее значение в 0, а для улучшения положите document.getElementById("text") также вне функции.

Поместите его за пределы функции.

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>

Answer 2

Такое поведение существует потому, что каждый раз, когда вы click кнопку, countStr переменная будет 0. Вы должны объявить его вне функции.

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>

Другой способ состоит в использовании функции closure.

Подробнее о closures, here.

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

 
})();

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