Question

我正在尝试创建将改变div颜色的onclick事件，到目前为止这就是我所做的：

for (var x = 0; x<question_details.length; x++){
    var question_div_id = document.getElementsByName(question_details[x].question);
    answer = question_details[x].answer;
    divs = question_div_id;
    changeColor(answer, divs);
}

function changeColor(answer, divs) {
    for (var y = 0; y<divs.length; y++){
        if (divs[y].id == answer){
            document.getElementById(divs[y].id).onclick = function (num) {
                document.getElementById(divs[num].id).style.backgroundColor="green";
            }(y);
        }else{
            document.getElementById(divs[y].id).onclick = function(num) {
                document.getElementById(divs[num].id).style.backgroundColor="red";
            }(y);
        }
    }
}

结果如下：

onlcick事件正在设置样式而没有任何点击事件。我尝试了.onclick = function_name;，这产生了不同的结果，虽然它识别了click函数，但样式仅应用于最后一个元素。

要求是，当用户单击可能的答案时，如果它不正确，则该元素的样式将变为红色。如果答案正确，则样式将变为绿色。

有人可以引导我走向正确的方向。

Answer 1

你的函数changeColor应该只检查它是否是正确的答案，然后改变div的颜色。

在第一个for循环中，您需要为包含答案的每个div添加EventListener。这样，对于每次点击，都可以让您检查答案。

这将是这样的：

question_div_id.addEventListener("click", function(){
    answer = question_details[x].answer;
    divs = question_div_id;
    changeColor(answer, divs);
});

Answer 2

你正在执行这个功能，并指定undefiend来点击你需要传递一个功能：

function changeColor(answer, divs) {
    for (var y = 0; y<divs.length; y++){
        if (divs[y].id == answer){
            document.getElementById(divs[y].id).onclick = function (num) {
                return function() {
                    document.getElementById(divs[num].id)
                        .style.backgroundColor="green";
                };
            }(y);
        }else{
            document.getElementById(divs[y].id).onclick = function(num) {
                return function() {
                    document.getElementById(divs[num].id)
                        .style.backgroundColor="red";
                };
            }(y);
        }
    }
}

在forloop范围问题中{Javascript onclick

2 个答案: