Select alternatives

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

首先，您应该通过将'this‘作为参数传递给函数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。考虑到alternative2是正确答案..。

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

就是这样！