rwvb rwvb - 4 months ago 11
HTML Question

radio button only changes value when double clicked?

In my code I have five radio buttons with one set checked by default. When I click on a radio button the function

setMode()
is called but the test to check which button is checked fails.

When the same radio button is clicked a second time
setMode()
is called the test will return true.
The test is
if(document.getElementById("rcool").checked)


I have tried changing the mouse events and the test eg.
.checked=="true"
and
.checked=="checked"
.
I have searched and only found similar topics in jQuery which I am unfamiliar with so could not make sense of them.

I am using Firefox 47.0 and have checked for errors using Firebug 2.0.17.
I am not very sure how to use Firebug and don't know what to try next.

Any help or comments are greatly appreciated.



var options = ["power=off","mode=heat","temp=20"];
var temp = 20;

function power() {
var pwr = document.getElementById("powerBtn");
var pwrtxt;

if(pwr.innerHTML=="OFF"){
pwrtxt = "power=on";
pwr.innerHTML = "ON";
}
else {
pwrtxt = "power=off";
pwr.innerHTML = "OFF";
}
options[0] = pwrtxt;
document.getElementById("textOutput").value = options;
}


function setMode(){
if(document.getElementById("rheat").checked)
options[1] = "mode=heat";
if(document.getElementById("rcool").checked)
options[1] = "mode=cool";
if(document.getElementById("rdry").checked)
options[1] = "mode=dry";
if(document.getElementById("rauto").checked)
options[1] = "mode=auto";
if(document.getElementById("recono").checked)
options[1] = "mode=econo";

document.getElementById("textOutput").value = options;
}

function updateTemp(){
var tempString = "temp=";

options[2] = tempString.concat("",temp);
document.getElementById("textOutput").value = options;
}
function increaseTemp(){
temp += 1;
if(temp>31) {
temp = 31;
}
updateTemp();
}
function decreaseTemp(){
temp -= 1;
if(temp < 16){
temp = 16;
}
updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}

<!DOCTYPE html>
<html>
<body>
<button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onmouseup="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
<textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
<br>
<input type="submit">
</form>

</body>
</html>




Answer

To launch a function when a radio button is clicked, you must use onchange event, not onclick/onmouseup. onchange gracefully wait for the radio button to be effectively clicked/updated before calling the function.

var options = ["power=off","mode=heat","temp=20"];
var temp = 20;
window.onload=function(){document.getElementById("textOutput").value = options;}
function power() {
    var pwr = document.getElementById("powerBtn");
    var pwrtxt;

    if(pwr.innerHTML=="OFF"){
        pwrtxt = "power=on";
        pwr.innerHTML = "ON";
    }
    else {
        pwrtxt = "power=off";
        pwr.innerHTML = "OFF";
    }
    options[0] = pwrtxt;
    document.getElementById("textOutput").value = options;
}


function setMode(){
    if(document.getElementById("rheat").checked)
        options[1] = "mode=heat";
    if(document.getElementById("rcool").checked)
        options[1] = "mode=cool";
    if(document.getElementById("rdry").checked)
        options[1] = "mode=dry";
    if(document.getElementById("rauto").checked)
        options[1] = "mode=auto";
    if(document.getElementById("recono").checked)
        options[1] = "mode=econo";

    document.getElementById("textOutput").value = options;
}

function updateTemp(){
    var tempString = "temp=";

    options[2] = tempString.concat("",temp);
    document.getElementById("textOutput").value = options;
}
function increaseTemp(){
    temp += 1;
    if(temp>31) {
        temp = 31;
    }
    updateTemp();
}
function decreaseTemp(){
    temp -= 1;
    if(temp < 16){
        temp = 16;
    }
    updateTemp();
}
function stopTime(){
}
function startTime(){
}
function incTime(){
}
function decTime(){
}
<!DOCTYPE html>
<html>
<body>
  <button type="button" id="powerBtn" onmouseup="power()">OFF</button>
<button type="button" id="increase" onmouseup="increaseTemp()">Up</button>
<button type="button" id="decrease" onmouseup="decreaseTemp()">Down</button>
<br>
<input type="radio" id="rheat" name="mode" onchange="setMode()" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onchange="setMode()" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onchange="setMode()" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onchange="setMode()" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onchange="setMode()" value="econo">ECONOCOOL<br>
<br>
<button type="button" id="stopTmr" onmouseup="stopTime()">Stop Time</button>
<button type="button" id="startTimer" onmouseup="startTime()">Start Timer</button>
<br>
<button type="button" id="incTime" onmouseup="incTime()">Increase Time</button>
<button type="button" id="decTime" onmouseup="decTime()">Decrease Time</button>
<form action="action_page.php">
  <textarea id="textOutput" name="message" rows="10" cols="30"></textarea>
  <br>
  <input type="submit">
</form>

</body>
</html>