CODEWITHSUNDEEP
javascripthtml
김승재
김승재

Reputation: 21

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.

Upvotes: 0

Views: 33

Answers (1)

Ali Sheikhpour
Ali Sheikhpour

Reputation: 11055

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>

Upvotes: 1

Related Questions