Question

几天前我进入了js。我开始玩新东西的功能和事件，但我被困在这里

＆＃13;

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

＆＃13;

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

＆＃13;

当我点击按钮时，文本变为str [0]但是当我再次点击它时它不会改变;你能告诉我为什么吗？

Answer 1

此行为的存在是因为每次click按钮，countStr变量都为0.您需要在函数外声明它。

＆＃13;

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

＆＃13;

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

＆＃13;

另一种方法是使用closure函数。

详细了解closures，here。

＆＃13;

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;
  }

})();

＆＃13;

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

＆＃13;

Answer 2

因为您的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>

单击按钮更改html文本

2 个答案: