JavaScript，如何根据变量更改 id？

Question

基本上，我正在使用 JavaScript 为我的 Arduino 测试代码。我想做的（在Arduino上）是单击一个按钮（+）来改变屏幕（有8个屏幕，0索引）。实际发生的是您单击按钮，该按钮增加一个变量，然后该变量控制“激活”的屏幕。当变量等于 7 时，下一次按下会将其更改为 0。还有一个 (-) 按钮，它的作用相反。

以上是我想在我的 Arduino LCD 上实现的。但是，我用 JavaScript 编写它只是为了测试逻辑等。

这是我当前的代码：

<p id='cool'></p>
<button id='plus' onclick='plus(); check()'>+</button>
<button id='sub' onclick='sub(); check()'>-</button>    
<br>
<p id='show'></p>

<script>

    var cool = document.getElementById('cool');
    var status = 0;

    function plus(){

        if(status == 7){
            status = 0;
        }else{
            status++;
        }

        cool.innerHTML = status;
    }

    function sub(){

        if(status == 0){
            status = 7;
        }else{
            status--;
        }

        cool.innerHTML = status;
    }

</script>

cool id 仅显示状态。

我想根据状态值更改显示 ID 的内容。我最初不得不使用 switch 语句，例如：

function check(){
    switch(status){
        case 0:
        document.getElementById('show') = "one";
        break;
        case 1:
        document.getElementById('show') = "two";
        break;
        default:
        document.getElementById('show') = "default";
    }
}

您会注意到check() 函数已经在按钮的onclick 中。

不幸的是，这种方法对我不起作用，有什么想法吗？

Answer 1

document.getElementById('show').innerHTML="one" 似乎是你想要的——

或者也许

document.getElementById('show').innerHTML=["zero","one","two",...,"seven"][status]

这是一个完整的例子 - 请注意 sn-p 将所有这些包装在“window.onload”类型的事件处理程序中。您需要将脚本放在 </body> 之前，才能在没有 onload 的情况下获得相同的效果

var screens = [
  "Screen 1",
  "Screen 2",
  "Screen 3",
  "Screen 4",
  "Screen 5",
  "Screen 6",
  "Screen 7",
  "Screen 8"
];

var cool = document.getElementById('cool');
var show = document.getElementById('show');
var status = 0;

function plus() {

  if (status == 7) {
    status = 0;
  } else {
    status++;
  }

  cool.innerHTML = status;
}

function sub() {

  if (status == 0) {
    status = 7;
  } else {
    status--;
  }
}  
function check() {
  cool.innerHTML = status;
  show.innerHTML = screens[status];
}
check(); // show the first screen (status = 0)

<p id='cool'></p>
<button id='plus' onclick='plus(); check()'>+</button>
<button id='sub' onclick='sub(); check()'>-</button>
<br>
<p id='show'></p>

Answer 2

我不确定您所说的“对我没有用”到底是什么意思。请考虑以下几点： 在您的 switch 语句中，您正在检查“状态”的值，本质上是否存在“状态”的值做某事。然而，在 JavaScript 中，数值 0 是一个假值。因此，当值为 0 时，您的切换条件将永远不会满足。同样，0 与 false（或 null）相同，但您的切换仅在有值且 0 不被视为值时才会执行。 尝试使用类似的东西：

switch(status || status === 0){
...
}

另外，我会直接从“plus”和“sub”函数中调用“check()”函数。

还有一件事，如下：

document.getElementById('show') = "one"

应该是：

document.getElementById('show').innerText = "one"

或

document.getElementById('show').innerHTML = "one"

同样适用于类似的陈述。

我希望这会有所帮助。