Increase/Decrease value with degree value

Question

I'm working on a personal project. I have attached a screenshot of my GUI.

Basically I'm trying to increase/decrease the value inside the H3 tag labeled "Set Temp"

When I click the "Up" Button I want it to increase the "temp" by 1deg and vice versa for "Down" Button.

I've tried using code from other posts: justGage - increase and decrease value with buttons

Increase counter value upon button click

But i'm a bit lost when using JS. Any help is appreciated!

I didn't include any script functions since the ones I tried didn't match what I was looking for(at least to my understanding).

My markup for the Screenshot is below:

<div class="col-md-6">
    <div class="form-block center-block pl-10 light-gray-bg border-clear">
        <h3 class="h3">Current Temp</h3>
            <h3 class="h2" name="CurrentTemp" id='CurrentTemp' value='70'>70&deg;</h3>
    </div>
    <div class="form-block center-block p-30 light-gray-bg border-clear">
        <h3 class="h2">Set Temp</h3>
        <h3><span id="amountSpan">70&deg;</span></h3> 
            <button id="inc" type="Button" class="btn btn-danger"><i class="fa fa-angle-up"></i></button>
            <button id="dec" type="Button" class="btn btn-primary"><i class="fa fa-angle-down"></i></button>        
    </div>    
</div>

Gui Screenshot

What exactly about the linked questions doesn't work for you? — Steve, May 12 '16 at 05:20
@steve. I was having trouble with the bind click event handler. Those examples worked for me in jsfiddle environment but not in my test server. Not sure if it was that i wasnt calling the js script properly or something else. It was late last night and i had been trying for some time. Also those examples were sctructured for an input box. — cpt-crunchy, May 13 '16 at 05:04

Pranav C Balan · Accepted Answer · 2016-05-12T05:58:54.923

Bind click event handler, inside event handler update the value based on previous value and clicked button.

$('#inc,#dec').click(function() { // bind click event for both buttons
  var $this = this; // store the reference
  $('#amountSpan').html(function(i, v) { // get htnl content for updating
    v = Number(v.match(/\d+(\.\d+)?/)[0]); // get current value and parse it to number
    return ($this.id == 'inc' ? v + 1 : v - 1) + '&deg;'; // based on clicked button decrement or increment 
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-md-6">
  <div class="form-block center-block pl-10 light-gray-bg border-clear">
    <h3 class="h3">Current Temp</h3>
    <h3 class="h2" name="CurrentTemp" id='CurrentTemp' value='70'>70&deg;</h3>
  </div>
  <div class="form-block center-block p-30 light-gray-bg border-clear">
    <h3 class="h2">Set Temp</h3>
    <h3><span id="amountSpan">70&deg;</span></h3> 
    <button id="inc" type="Button" class="btn btn-danger"><i class="fa fa-angle-up"></i>+
    </button>
    <button id="dec" type="Button" class="btn btn-primary"><i class="fa fa-angle-down"></i>-
    </button>
  </div>
</div>

score 0 · Answer 2 · answered May 12 '16 at 05:30

Try this:

$( document ).ready(function() {
    $("#inc").click(function() {
       var txt = $("#amountSpan").text();
       var suffix = txt.match(/\d+/);
       var num = suffix[0];
       num = parseInt(num) + 1;
       $("#amountSpan").text(num+String.fromCharCode(176));
    });

    $("#dec").click(function() {
        var txt = $("#amountSpan").text();
        var suffix = txt.match(/\d+/);
        var num = suffix[0];
        num = parseInt(num) - 1;
        $("#amountSpan").text(num+String.fromCharCode(176));
    });
});

score 0 · Answer 3 · edited May 12 '16 at 06:39

Add a span around the number value of the temperature first (70°, then add the following javascript code

$('#inc').click(function(){
    var counter = $('#amountSpan').text();
       counter++ ;
      $('#amountSpan').text(counter);
});
$('#dec').click(function(){
    var counter = $('#amountSpan').text();
    if(counter!="1"){
       counter-- ;
     $('#amountSpan').text(counter);
    }
});

Increase/Decrease value with degree value

3 Answers3