添加事件监听器时等待元素加载的方法答案

【问题标题】：Ways to wait for elements to load when adding eventlisteners添加事件监听器时等待元素加载的方法
【发布时间】：2022-11-24 07:32:25
【问题描述】：

在 vscode 中使用 liveserver 之前，我一直在玩包裹，我很少遇到这个问题。我正在尝试将事件监听器添加到输入表单。无论我做什么，DOM 都找不到元素。我试图在放置侦听器之前放置一个 if 语句来检查元素是否存在，但它不会改变任何东西。我使用 liveserver 从来没有遇到过这个问题，我是否必须编写一个异步函数并等待页面加载？我也尝试将 defer 放在脚本标签中。包裹是否比 liveserver 慢？

const input1 = document.getElementById("input1");
if(input1)
{
    console.log("The input exists");
    input1.addEventListener('click', () =>{
        console.log("heey");
    });
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./assets/scss/main.scss">
</head>

<body>
    <form>
        <div class="form-group">
            <label for="inputlg">input</label>
            <input class="form-control input-lg" id="inputlg" type="text" id="input1">
            <label for="inputlg">output</label>
            <input class="form-control input-lg" id="inputlg" type="text">
        </div>

    </form>
    <script type="module" src="./assets/js/main.js" ></script>
</body>

</html>

【问题讨论】：

只需使用 document.addEventListener('DOMContentLoaded') 但如果你想打败它，你可以使用 MutationObserver 在页面仍在加载时观察 DOM，但这是一个先进的用例...
同一个标签上不能有两个 id 属性。这里只留一个 <input type="text" id="input1"> 并且 id 对于 DOM 中的所有元素应该是唯一的

标签： javascript html

【解决方案1】：

您的输入有两个 ID。 getElementById 没有找到第二个。

const input1 = document.getElementById('input1');
console.log(input1); // null

const inputlg = document.getElementById('inputlg');
console.log(inputlg); // input#inputlg.form-control.input-lg

&lt;input class="form-control input-lg" id="inputlg" type="text" id="input1"&gt;

【讨论】：