通过单击按钮更改 html 文本答案

【问题标题】：Changing html text with button click通过单击按钮更改 html 文本
【发布时间】：2017-05-31 10:23:06
【问题描述】：

我几天前接触了 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>

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

【问题讨论】：

countStr 每次调用Generate 函数时都设置为0...
将 countStr 移到函数外，确保你的 countStr 不超过 str.length
@Closer - 这包含显示问题所需的代码
@Zied，为了帮助别人而接受答案怎么样？

标签： javascript html function events button

【解决方案1】：

存在这种行为是因为每次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>

【讨论】：

【解决方案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>

【讨论】：

可能有人在你回答完之前投票
很抱歉打扰您，但我有另一个问题：c 是否可以不在 html 中使用“onclick="generate()" 而我使用 button.addEvenetListener("click",Generate() {}; ? 和第一个一样吗？
onclick="generate() 可以在所有浏览器中使用，但addEvenetListener 无法在 Internet Explorer 中使用。对于 IE，您需要使用 attachEvent。但在全球范围内，它们是相同的，但最佳做法是使用代码附件作为第二种情况。