Question

在DOM加载后，我正在创建一个输入框和一个提交按钮，但附加后似乎无法访问它们

textInput = document.createElement('input');

textInput.setAttribute("id", "myMessage");
textInput.setAttribute("type", "text");
textInput.setAttribute("name", "message");

submitButton = document.createElement('input')

submitButton.setAttribute("id", "sendbutton");
submitButton.setAttribute("type", "submit");
submitButton.setAttribute("name", "submit");
submitButton.setAttribute("value", "Send");

document.getElementById("msgInput").append(textInput)
document.getElementById("msgInput").append(submitButton)

我正在尝试通过这种方式访问它以捕获事件keypress，keyup和onclick。

document.addEventListener('DOMContentLoaded', () => {
    document.getElementById("myMessage").addEventListener('keypress', handleKeyPress);
    document.getElementById("myMessage").addEventListener('keyup', handleKeyUp);

    document.querySelector('#sendbutton').onclick = () => {
        var data = {'msg': document.querySelector('#myMessage').value, 'username': username };
        append_msgs(data);
        document.querySelector('#myMessage').value = '';
    }
});

Answer 1

在函数中尝试console.log(document.querySelector('#myMessage'))，然后查看返回的结果。尽管它不能解决问题，但可以帮助您使用Inspector工具（Chrome中的 F12 ）控制台来确定发生了什么。您是否尝试过使用getElementById 而非querySelector进行测试？

访问DOM加载后附加的元素

1 个答案: