在點擊選擇替代方案

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") 
} 

就是這樣！