代わりの選択onClick

Question

私は時計が表示され、時計で示された所定の時間の正しい代替案を選択する必要があるjavascriptのゲームを作っています。

私は、ユーザーが代替を選択できるようにして、バックラウンドを正しいものにして緑に変え、偽にするとオレンジ色に変えたいと思っています。

<button type="button" onclick="correctClock()" id="alternative1" class="btn btn-default btn-lg btn-block">Viertel nach drei</button> 
<button type="button" onclick="correctClock()" id="alternative2" class="btn btn-default btn-lg btn-block">f&uuml;nf vor zw&ouml;lf</button> 
<button type="button" onclick="correctClock()" id="alternative3" class="btn btn-default btn-lg btn-block">zehn Minuten vor eins</button> 
<button type="button" onclick="correctClock()" id="alternative4" class="btn btn-default btn-lg btn-block">Viertel vor zw&ouml;lf</button> 

私のjavascriptコード。

function correctClock() { 
document.getElementById('alternative1').removeClass("btn-default").addClass("btn-danger"); 
document.getElementById('alternative2').removeClass("btn-default").addClass("btn-success"); 
document.getElementById('alternative3').removeClass("btn-default").addClass("btn-danger"); 
document.getElementById('alternative4').removeClass("btn-default").addClass("btn-danger"); 
} 

Answer 1

これで問題を解決できますか？

HTML

<button type="button" onclick="correctClock(this)" id="alternative1" class="btn btn-default btn-lg btn-block">Viertel nach drei</button> 
<button type="button" onclick="correctClock(this)" id="alternative2" class="btn btn-default btn-lg btn-block">f&uuml;nf vor zw&ouml;lf</button> 
<button type="button" onclick="correctClock(this)" id="alternative3" class="btn btn-default btn-lg btn-block">zehn Minuten vor eins</button> 
<button type="button" onclick="correctClock(this)" id="alternative4" class="btn btn-default btn-lg btn-block">Viertel vor zw&ouml;lf</button> 

Javascriptを

function correctClock(clickedButton) { 
    var correct_answer = "alternative1"; 
    if (clickedButton.id == correct_answer) { 
     document.getElementById('alternative1').removeClass("btn-default").addClass("btn-success"); 
    } else { 
     document.getElementById('alternative2').removeClass("btn-default").addClass("btn-danger"); 
    } 
} 

Answer 2

次の操作を行うことができます

<button type="button" onclick="correctClock("alternative1")" id="alternative1" class="btn btn-default btn-lg btn-block">Viertel nach drei</button> 
<button type="button" onclick="correctClock("alternative2")" id="alternative2" class="btn btn-default btn-lg btn-block">f&uuml;nf vor zw&ouml;lf</button> 
<button type="button" onclick="correctClock("alternative3")" id="alternative3" class="btn btn-default btn-lg btn-block">zehn Minuten vor eins</button> 
<button type="button" onclick="correctClock("alternative4")" id="alternative4" class="btn btn-default btn-lg btn-block">Viertel vor zw&ouml;lf</button> 

そして、あなたのコールバックでそれを確認：

function correctClock() { 
if ("alternative1") { 
    document.getElementById('alternative1').removeClass("btn-default").addClass("btn-danger"); 
} 
else if ("alternative2") { 
    document.getElementById('alternative2').removeClass("btn-default").addClass("btn-success"); 
} 
else if ("alternative3") { 
    document.getElementById('alternative3').removeClass("btn-default").addClass("btn-danger"); 
} 
else { 
    document.getElementById('alternative4').removeClass("btn-default").addClass("btn-danger"); 
} 

を

}

Answer 3

まず第一に、あなたは、関数correctClock

<button type="button" onclick="correctClock(this)" id="alternative1" class="btn btn-default btn-lg btn-block">Viertel nach drei</button> 
<button type="button" onclick="correctClock(this)" id="alternative2" class="btn btn-default btn-lg btn-block">f&uuml;nf vor zw&ouml;lf</button> 
<button type="button" onclick="correctClock(this)" id="alternative3" class="btn btn-default btn-lg btn-block">zehn Minuten vor eins</button> 
<button type="button" onclick="correctClock(this)" id="alternative4" class="btn btn-default btn-lg btn-block">Viertel vor zw&ouml;lf</button> 

にパラメータとして「これ」を渡すことによって、クリックされた要素を渡す必要があり、その後、あなたはのIDに応じて、条件を追加する必要があります私達が持っている要素。代替案2を考えてみましょう...

function correctClock(element) { 
element.id==='alternative2'?element.removeClass("btn-default").addClass("btn-success"):element.removeClass("btn-default").addClass("btn-danger") 
} 

それです！