김승재 김승재 - 5 months ago 16
HTML Question

js - change html attribute with a js button

I'm trying to make a HTML page to control a thermostat outside home.
I want to use HTML

button
attribute to increase/decrease the values but it doesn't work. What's wrong with my code?

And if you want to use JQuery, please explain easily since I'm new to JS.

Code:

<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>


If it's trivial, sorry but I could't find any tips on this... Sorry again.

Answer

You have to update innerHtml on every click. So I moved the plus and minus to a new function. Also dont forget to Show the initial value of 21 inside #heatset:

<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>
Comments