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

Posted 2023-05-07

【中文标题】使用 javascript 按钮更改 html，使用自动递增数字选择多个值

【英文标题】：Using a javascript button to change html, with multiple values that are picked using an auto incrementing number

【发布时间】：2017-04-05 11:53:21

【问题描述】：

基本的html：

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

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

var selector = 0;

我们将选择器设置为 0。接下来，每次单击“更改器”按钮时，我们将选择器变量加 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...

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

【参考方案1】：

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

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>