javascript - 通过弹出窗口中的按钮获取文本框值

Question

我是 chrome-extension/java 脚本开发的新手，我坚持以下练习。

我创建了一个带有按钮和文本框的弹出窗口。我想在按下提交按钮时将文本框值传递给警报。到目前为止，我有以下代码：

popup.html

<div id="popup"></div>
<form name="q">
    <input name="query" id="userQuery" type="text" />
    <button id="button1">Submit</button>
    <!-- <input type="button" name="button" value="query" /> -->
</form>

popup.js

document.addEventListener('DOMContentLoaded', function () {
    console.log(document.getElementById('userQuery'));
    document.getElementById('button1').addEventListener('click', myAlert(document.getElementById('userQuery')));
 });

function myAlert(query){
    alert(query.value)
}

但是，我将“null”作为 query.value，因此警报为空。我还注意到，当单击弹出窗口的扩展名时，我也会收到警报，我不明白为什么，我同时使用了“click”和“onclick”，但我遇到了同样的问题。

任何提示或帮助将不胜感激！

Answer 1

一种方法：

document.getElementById('button1').addEventListener('click', function() { myAlert(document.getElementById('userQuery')); });

在您的代码中，表达式在被调用myAlert(document.getElementById('userQuery'))时被评估addEventListener。这就是您在页面加载时看到空白警报的原因。相反，您需要传递一个函数，该函数将在单击事件发生时执行。

Answer 2

试试这个$("#userQuery").val()或document.getElementById("userQuery").value

代替 document.getElementById('userQuery')