事件侦听器无响应-Javascript

Question

I am trying to write a quiz in pure javascript that loads new questions from an array and fills a table when the user clicks next. 我正在尝试用纯JavaScript编写测验，以从数组中加载新问题并在用户单击下一步时填充表格。 A seemingly simple problem I have is that I cannot get an event listener to work when the user clicks the next button. 我遇到的一个看似简单的问题是，当用户单击下一步按钮时，无法使事件侦听器正常工作。 On JSFiddle it works, but it won't work on my end and I have no idea why. 在JSFiddle上，它可以工作，但对我而言不起作用，我也不知道为什么。 Just as a test I have it alerting if the button is pressed. 就像测试一样，我会警告是否按下了按钮。 I have also tested multiple different ways of checking if the document has loaded before executing to no avail. 我还测试了多种不同的方法，以检查文档是否已加载，然后再执行无济于事。

HTML HTML

<body>
    <table class="center">
        <tr>
            <th id='question' colspan="2">question</th>

            <td colspan="2"></td>
        </tr>
        <tr>
            <td id="answer0">Choice 1</td>
            <td><input id="radio0" type="radio" name=que_1 value="1" required/></td>
        </tr>
        <tr>
            <td id="answer1">choice 2</td>
            <td><input id="radio01" type="radio" name=que_1 value="1"/></td>
        </tr>
        <tr>
            <td id="answer2">choice 3</td>
            <td><input id="radio02" type="radio" name=que_1 value="1"/></td>
        </tr>
        <tr>
            <td id="answer3">choice 4</td>
            <td><input id="radio03" type="radio" name=que_1 value="1"/></td>
        </tr>

    </table>
    <div>
        <input type="button" id="next" value='Next'>
    </div>
</body>

Javscript Javscript

document.getElementById("next").addEventListener("click", function() {
    alert("works");
});

Thank you in advanced. 在此先感谢您。

Answer 1

Make sure you bind the event handler after the DOM is loaded: 确保在加载DOM之后绑定事件处理程序：

window.addEventListener('load', function() {
    document.getElementById("next").addEventListener("click", function() {
        alert("works");
    });
});

事件侦听器无响应-Javascript

问题描述

1 个解决方案

解决方案1
1 2015-01-27 17:36:59

事件侦听器无响应-Javascript

问题描述

1 个解决方案

解决方案1 1 2015-01-27 17:36:59

解决方案1
1 2015-01-27 17:36:59