Question

如果我使用onclick事件，此代码可以正常工作，但我的在线课程说我不能使用它，但如果没有它，代码将无效。我需要找另一个来收集数据。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <script src="activity2.js" type="text/javascript" ></script>
    </head>
    <body>
        <input name="data" id="data" placeholder="Enter text" type="text">
        <button type="submit" id="submit">Click</button>
        <p id="replace">Replace this text.</p>
    </body>
</html>

JavaScript的：

document.getElementById("submit").addEventListener("click", collect);

function collect() {
    var info = document.getElementById("data").value;
    document.getElementById("replace").innerHTML = info;
}

Answer 1

在页面加载之前，您的javascript可能正在运行。如果元素带有id＆＃34;提交＆＃34;当你添加事件监听器时，它还不存在，那么显然不会有一个带有监听器的DOM节点。然后，在监听器添加＆＃34;之后，创建一个没有事件监听器的DOM节点。

所以，你只需要在页面加载后运行javascript：

window.onload = function () { 
    document.getElementById("submit").addEventListener("click", collect);
    function collect() {
        var info = document.getElementById("data").value;
        document.getElementById("replace").innerHTML = info;
    } 
}

或者将脚本放在最后（或同时执行）：

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <input name="data" id="data" placeholder="Enter text" type="text">
        <button type="submit" id="submit">Click</button>
        <p id="replace">Replace this text.</p>
        <script src="activity2.js" type="text/javascript" ></script>
    </body>
</html>

Answer 2

使用此jquery脚本

$(document).ready(function(){
    $("submit").click(function(){
       var info = document.getElementById("data").value;
       document.getElementById("replace").innerHTML = info;
     });
});

无法在按钮标记中添加onclick事件作为属性，无法使addEventListener（）工作

2 个答案: