Question

在我的代码中，我有五个单选按钮，默认情况下已选中一组。当我单击一个单选按钮时，会调用函数setMode()，但检查选中哪个按钮的测试失败。

当第二次点击相同的单选按钮setMode()时，测试将返回true。测试为if(document.getElementById("rcool").checked)

我尝试过更改鼠标事件和测试，例如。 .checked=="true"和.checked=="checked"。我搜索过，只在jQuery中发现了类似的主题，我不熟悉它们。所以无法理解它们。

我正在使用Firefox 47.0并使用Firebug 2.0.17检查错误。我不太确定如何使用Firebug并且不知道下一步该尝试什么。

非常感谢任何帮助或评论。

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 1

要在单击单选按钮时启动功能，必须使用onchange事件，而不是onclick / onmouseup。在调用函数之前，onchange会优雅地等待单选按钮被有效地单击/更新。

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>

Answer 2

通常我会将侦听器放在这些单选按钮上，并在单击它们时识别它们。您似乎更喜欢旧式学校的方式，因此我的代码中没有太多变化，但在setMode()函数中添加了一个名为mode的参数。基本上mode已经在调用setMode()时定义，因此您不必再检查每个单选按钮。 switch()此处可根据options[1]将相对值分配给mode。好好享受吧，祝你好运。

＆＃13;

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( mode ){
  switch ( mode ) {
      case 'rheat':
        options[1] = "mode=heat";
        break;
      case 'rcool':
        options[1] = "mode=cool";
        break;
      case 'rdry':
        options[1] = "mode=dry";
        break;
      case 'rauto':
        options[1] = "mode=auto";
        break;
      case 'recono':
        options[1] = "mode=econo";
        break;
  }
    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(){
}

＆＃13;

  <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('rheat')" value="heat" checked="checked">HEAT<br>
<input type="radio" id="rcool" name="mode" onmouseup="setMode('rcool')" value="cool">COOL<br>
<input type="radio" id="rdry" name="mode" onmouseup="setMode('rdry')" value="dry">DRY<br>
<input type="radio" id="rauto" name="mode" onmouseup="setMode('rauto')" value="auto">AUTO<br>
<input type="radio" id="recono" name="mode" onmouseup="setMode('recono')" 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>

＆＃13;

单击按钮只会在双击时更改值？

2 个答案: