Question

此代码无效，但我不明白为什么。

HTML：

<button id="button">add item</button>
<input type="text" id="text" />

JavaScript：

let text = document.querySelector('#text').value;
let button = document.querySelector('#button');
button.addEventListener('click', ()=>{
alert(text)
})

当我单击时，“警报”为空-没有我写的文字。

Answer 1

这是因为您无需更改文本即可立即声明文本的值。页面加载后，它立即获取id =“ text”的input值，该值等于空字符串，因为您根本没有时间在其中键入任何内容。例如，如果将输入的“值”属性设置为“ 5”，则警报将始终警报“ 5”。

为了始终获取'#text'中的当前值，您需要在事件监听器中设置'text'的值。像这样：

<body>
    <button id="button">add item</button>
    <input type="text" id="text" />
    <script>
        let button = document.querySelector('#button');
        
        button.addEventListener('click', ()=>{
            let text = document.querySelector('#text').value;
            alert(text);
        });
    </script>
</body>

现在，它应该警告您在输入中键入的内容。我也没有编程经验，但是我希望这会有所帮助。

为什么text.value不返回输入值？

1 个答案: