Мой код JS с addEventHandler / click не работает?

Question

<script>
    var counter = 0;
    //Loads all the elements and assigns event handlers
    function load()
    {
        //create and append prev button

        loadPeople(counter);

        var btnNext = document.createElement("div");
        btnNext.setAttribute("class", "button");
        btnNext.setAttribute("id", "n");
        btnNext.innerHTML = "Next"
        root.appendChild(btnNext);

    }

    function loadPeople(index)
    {
        //This creates and appends several boxes with photos to represent various people
    }

    function addListeners()
    {
        //Add listeners
        //Previous

        //Next
        var eventNextClick = document.getElementById("n");
        eventNextClick.addEventListener("onclick", next, true);
    }

    //This should fire when next button is clicked
    function next()
    {
        alert("This works");
    }

    document.addEventListener("DOMContentLoaded", load, false)
    addListeners();

</script>

В основном ... мой код генерирует две кнопки prev и next и несколько полей, которые показывают изображения.Не обращайте внимания на ящики, сейчас я просто пытаюсь заставить событие click работать.

Этот код, кажется, не производит ничего кликабельного.Не уверен, где моя проблема.Пожалуйста, объясните свой ответ.Спасибо!

Answer 1

eventNextClick.addEventListener("onclick", next, true);

Вам необходимо использовать "click", а не "onclick"

Возможно, вы также захотите установить третий параметр на false, так как по умолчанию вы хотите использовать всплывающее окно.

document.addEventListener("DOMContentLoaded", load, false)
addListeners();

Вы также добавляете слушателей непосредственно после привязки события DOM ready.Это не сработает.Вам нужно подождать, пока load не сработает и пока не будет сгенерирована кнопка, прежде чем вы вызовете addListeners

function load()
{
    // snip

    // invoke add listeners here instead
    addListeners();
}

Answer 2

eventNextClick.addEventListener("onclick", next, true);

onclick должно быть просто click.

Однако помните, что в attachEvent() используется префикс on.