GetElementbyID не сработает

Question

Из моего чтения здесь я ожидаю, что этот код будет работать, но это не так. Я попробовал два способа добавить события click к кнопке «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; 

} 

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(); 
    }); 
}); 

Я также настоятельно рекомендую вам с помощью яваскрипта средства отладки, такие как FireBug или Chrome панели инструментов разработчика для проверки ваш код javascript и увидеть возможные ошибки с ним. Вкладка Console будет содержать ценную информацию о возможных ошибках в вашем javascript-коде.