ラジオボタンはダブルクリックすると値が変わるだけですか？

私のコードには5つのラジオボタンがあり、デフォルトでは1つのセットがチェックされています。ラジオボタンをクリックすると、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>

出典

2016-08-05 rwvb

ラジオボタンがクリックされたとき、あなたはの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>

出典

2016-08-05 02:29:49 technico

のonchangeは行いません唯一のもの

は、それが「変更」ではないので、何も移入しないでデフォルトでHEATをクリック、開始されたとき。私は 'onclick'をお勧めします。 – noob

私は同意します。ロジックを維持するには、チェックボックスがデフォルトとして定義されているので、オプション[1]の値も同様に定義する必要があります。あなたのソリューションは私のものより優れていますが、ラジオのonclickは本当にロジック/効率的な使用ではありません。 – technico

オプション値の更新されたコードは、ページの読み込みとして表示できます。 – technico

私はそれらのラジオボタンにリスナーを入れて、彼らがクリックされたときにそれらを識別します。あなたのコードではあまり変更されていないが、setMode()関数ではmodeという名前のパラメータを追加したので、古い学校の方法を好むようだ。基本的にmodeは既にsetMode()が呼び出されたときに定義されているので、各ラジオボタンをもうチェックする必要はありません。 switch()ここではoptions[1]に相対値をmodeに割り当てることができます。それと幸運に行きましょう。

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(){ 
 
}

<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>

出典

2016-08-05 02:32:24 noob

setMode関数で引数を書くことを避けるために、あなたは 'onmouseup =" setmode（this.value） "'を書いている可能性があります。 – technico

私は同意します。自動downvote xD – noob

あなたの入力をありがとう、私はスイッチを使用するとは思わなかった！ – rwvb

ラジオボタンはダブルクリックすると値が変わるだけですか？

答えて

関連する問題