JavaScript在DOM之前解析代码

我想问一下，我运行的代码如下所示：

document.addEventListener("DOMContentLoaded", () => {
    document.getElementById("named").onsubmit = () => {
        var name = document.getElementById("name").value;
        localStorage.setItem("name", name);
        select_create();
        return false;
    }
    document.getElementById("channel_created").onsubmit = () => {
        success("Success!");
        return false;}});

此代码确保在成功加载DOM后，代码应该运行。 然而，上面的块（document.getElementById（“named”））工作正常，但当我打开浏览器的控制台时，控制台显示：

TypeError:document.getElementById（“通道_已创建”）为空

HTML代码的表单id为“channel_created”。如果我在控制台中粘贴相同的第二个代码块，它就会工作。我是否遗漏了一些步骤

更新：我想我必须显示HTML代码，下面是相关代码：

        <div id="create">
        <form class="no-style" id="channel_created">
            <h1>Create a Channel to Talk (be specific)</h1>
            <div><input type="text" id="channel_name" name="channel_name" required placeholder="Please enter a channel name"><input type="submit" name="submit" value="Create a Channel Now!"></div>
        </form>
    </div>

创建对话频道（具体）

什么是

null

？是否有错误消息？控制台到底说了什么？

channel\u create

元素是否动态创建，例如通过

select\u create

？如果是这样，则需要在

select_create（）之后绑定事件

。请查看更新的问题@Xufox.@Ch.MuhammadSohaib，但在

document.getElementById（“named”）

上代码没有失败？完全正确@LuudJacobs，这是令人困惑的部分。在调用

document.getElementById（“channel\u created”）

之前停止执行。此时，检查DOM，并确保元素确实存在，并且具有完全匹配的名称。