1

从我在这里的阅读中，我希望这段代码可以工作，但事实并非如此。我尝试了两种将点击事件添加到名为“lonext”的按钮的方法。都不工作。我不确定为什么会这样？

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;

}
4

1 回答 1

3

getElementsByClassName返回 anNodeList因为您的 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 代码中可能出现的错误的宝贵信息。

于 2013-04-07T12:43:48.340 回答