javascript - js - 使用 js 按钮更改 html 属性

Question

我正在尝试制作一个 HTML 页面来控制家外的恒温器。我想使用 HTML button 属性来增加/减少值，但它不起作用。我的代码有什么问题吗？

如果你想使用 JQuery，请简单地解释一下，因为我是 JS 新手。

代码:

<script>
  var heatTemp=21;
</script>

<button class="temp_btn" onClick="heatTemp++">⇧</button>
<button class="temp_btn" onClick="heatTemp--">⇩</button>

<p id="heatset"></p>
<script>
  document.getElementById("heatset").innerHTML = heatTemp;
</script>

如果这是微不足道的，抱歉，但我找不到任何关于此的提示...再次抱歉。

Answer 1

您必须在每次点击时更新innerHtml。所以我把加号和减号移到了一个新函数中。另外不要忘记在#heatset 中显示初始值21:

<script>
  var heatTemp=21;
</script>

<button class="temp_btn" onClick="changeTemp(1)">⇧</button>
<button class="temp_btn" onClick="changeTemp(-1)">⇩</button>

<p id="heatset">21</p>
<script>
function changeTemp(dt){
   heatTemp =heatTemp + dt;
  document.getElementById("heatset").innerHTML = heatTemp;
}
</script>