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

首先，你应该通过传递＆＃39;这个＆＃39;来传递被点击的元素。作为函数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")
}

那就是它！

选择onClick上的替代品

3 个答案: