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只显示状态。

我想根据状态值更改show 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]

这是一个完整的示例 - 请注意，该片段将所有这些内容包含在＆＃34; window.onload＆＃34; type事件处理程序。您需要将脚本放在</body>之前，以便在没有onload

的情况下获得相同的效果

＆＃13;

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)

＆＃13;

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

＆＃13;

Answer 2

我不确定你到底是什么意思＆＃34;没有为我工作＆＃34;。请考虑以下事项：在你的switch语句中，你正在检查＆＃34; status＆＃34;的值，基本上是否有＆＃34; status＆＃34;的值。做一点事。但是，在JavaScript中，值numeric 0是一个假值。因此，当值为0时，永远不会满足您的切换条件。再次，0与false（或null）相同，但只有在存在值且0不被视为值时才会执行切换。尝试使用类似的东西：

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

另外，我会调用＆＃34; check（）函数来自＆＃34; plus＆＃34;和＆＃34; sub＆＃34;直接起作用。

还有一件事，如下：

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

应该是：

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

或

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

同样适用于类似的陈述。

我希望这会有所帮助。

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

2 个答案: