onclick on button,i want the button to be coloured as well as store a value

Question

here,i have 3 fields-temp,hum,number.In Temp field,i have created four buttons.The functionality i want is that,when i click on 1st button then 1st button should be coloured and store a value='1'.

And similarly when i clicked on 2nd button then i want 1st,2nd buttons should coloured and store a value='2'.

when i clicked on 3rd button then i want 1st,2nd,3rd buttons should coloured and store a value='3'.

when i clicked on 4th button then i want all buttons should coloured and store a value='4'. Same i want for hum n number field.how can i do???.Any help will be useful!!!!!

 .button { background-color: white; border: 1px solid black; color: white; padding: 8px 30px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; float: left; } 

 <div align='left'>Temp</div> <input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1"> <input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2"> <input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3"> <input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4"> <br><br> <div align='left'>Hum</div> <input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1"> <input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2"> <input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3"> <input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4"> <br><br> <div align='left'>number</div> <input type="button" class="button" onclick="this.style.backgroundColor = 'red';" value="1"> <input type="button" class="button" onclick="this.style.backgroundColor = 'yellow';" value="2"> <input type="button" class="button" onclick="this.style.backgroundColor = 'green';" value="3"> <input type="button" class="button" onclick="this.style.backgroundColor = 'orange';" value="4"> <br><br> <input type='submit' value='submit'> 

Answer 1

Use jquery to change each button background color

 $("#Temp1").click(function() { $("#Temp4").css("background-color", ""); $("#Temp3").css("background-color", ""); $("#Temp2").css("background-color", ""); $("#Temp1").css("background-color", "red"); $("#temp").text(1); }); $("#Temp2").click(function() { $("#Temp4").css("background-color", ""); $("#Temp3").css("background-color", ""); $("#Temp2").css("background-color", "yellow"); $("#Temp1").css("background-color", "red"); $("#temp").text(2); }); $("#Temp3").click(function() { $("#Temp4").css("background-color", ""); $("#Temp3").css("background-color", "green"); $("#Temp2").css("background-color", "yellow"); $("#Temp1").css("background-color", "red"); $("#temp").text(3); }); $("#Temp4").click(function() { $("#Temp4").css("background-color", "orange"); $("#Temp3").css("background-color", "green"); $("#Temp2").css("background-color", "yellow"); $("#Temp1").css("background-color", "red"); $("#temp").text(4); }); 

 .button { background-color: white; border: 1px solid black; color: white; padding: 8px 30px; text-align: center; text-decoration: none; display: inline-block; cursor: pointer; float: left; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div align='left'>Temp: <span id="temp"></span></div> <input type="button" class="button" id="Temp1"> <input type="button" class="button" id="Temp2"> <input type="button" class="button" id="Temp3"> <input type="button" class="button" id="Temp4"> <br><br> <input type='submit' value='submit'> 

Answer 2

I have done to only temp part, you can do it other as same

I have done some changes in html, I have put id for input tags and removed onClick() function and added in jQuery file.

<div align='left'>Temp</div>
<input type="button" class="button"  value="1" id="one">
<input type="button" class="button"  value="2" id="two">
<input type="button" class="button"  value="3" id="three">
<input type="button" class="button"  value="4" id="four">
<br><br>
</div>

jQuery

$(document).ready(function(){
$("#one").click(function(){
$('#one').css('background-color','red');
alert('one');
$("#one").val()=1;
$("#one").attr('value', '1');
})
$("#two").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$("#one").attr('value', '2');
$("#two").attr('value', '2');
})

$("#three").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$("#one").attr('value', '3');
$("#two").attr('value', '3');
$("#three").attr('value', '3');
})

$("#four").click(function(){
$('#two').css('background-color','yellow');
$('#one').css('background-color','red');
$('#three').css('background-color','green');
$('#four').css('background-color','grey');
$("#one").attr('value', '4');
$("#two").attr('value', '4');
$("#three").attr('value', '4');
$("#four").attr('value', '4');
})
});