javascript - 使用 javascript 按钮更改 html，并使用自动递增数字选取多个值

Question

基本 html:

<button id="changer">Changer button</button>
<div id="text"> </div>

“Changer”是 html 中的按钮元素，“text”是将放置文本的 div 标签。

var selector = 0;

我们将选择器设置为 0。接下来，每次单击“changer”按钮时，我们都会向选择器变量添加 1，除非它已达到最大值 14，在这种情况下我们重新开始。并根据选择器值，我们从可用的文本值中进行选择。

document.getElementById("Changer").onclick = function () {
if (selector < 14) {
selector++;
}
else {
    selector = 0;
    selector++;
}
document.getElementById("text").innerHTML = text;
}

if (selector = 1 ){
    text = "<p>this is text 1</p>";
if (selector = 2 ){
    text = "<p>this is text 2</p>";
etc...

问题是，单击该函数会直接跳转到最后一个可用的文本值。我该如何解决？如果需要，将很快添加实例。

Answer 1

您正在将 if 条件内的选择器分配给一个值。

if(selector = 1) {...

你真正想做的是检查selectors值是否等于这样:

if(selector == 1) {...

但你不需要重复检查，你可以简单地这样做:

var selector = 0;
var btn = document.getElementById('changer');
var output = document.getElementById('text');

btn.addEventListener('click', function() {
  if (selector < 14) {
    selector++;
    output.innerHTML = "<p>this is text " + selector + "</p>";
  } else {
    selector = 0;
    output.innerHTML = "";
  }
})

<button id="changer">Changer button</button>
<div id="text"> </div>