Question

从我在这里阅读，我希望这段代码能够运作，但它并没有。我尝试了两种方法将点击事件添加到名为＆＃34; lonext＆＃34;的按钮中。都没有工作。我不确定为什么会这样？

window.onload = function() {

var goSC = function() { //go to the sucess criteria section
    document.getElementsByClassName("guidance1").style.display = "none";
    document.getElementsByClassName("guidance2").style.display = "";
    alert("button clicked");

//first try
document.getElementById("lonext").addEventListener("click", function() {
    goSC();     
    }, false);

//second try
document.getElementById("lonext").onclick = goSC;

}

Answer 1

getElementsByClassName返回NodeList，因为您的DOM中可能有许多具有相同类的元素，而不是单个元素。

所以：

var goSC = function() {
    var guidance1 = document.getElementsByClassName("guidance1");
    for (var i = 0; i < guidance1.length; i++) {
         guidance[i].style.display = "none";
    }

    var guidance2 = document.getElementsByClassName("guidance2");
    for (var i = 0; i < guidance2.length; i++) {
         guidance[i].style.display = "";
    }

    alert("button clicked");
});

window.onload = function() {
    document.getElementById("lonext").onclick = goSC;
};

如果您使用jQuery，则可以简化为：

$(function() {
    $('#lonext').click(function() {
        $('.guidance1').hide();
        $('.guidance2').show();
    });
});

我还强烈建议您使用javascript调试工具（如FireBug或Chrome Developer工具栏）来检查您的javascript代码并查看其中的潜在错误。 Console标签将包含有关您的JavaScript代码中可能的错误的重要信息。

GetElementbyID无法触发

1 个答案: