Question

基本的HTML：

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

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

var selector = 0;

我们将选择器设置为0.接下来，每次单击“更改器”按钮时，我们将1添加到选择器var，除非它已达到其最大值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

您正在将selector条件中的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>

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

1 个答案: