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

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

而不是document.getElementById('userQuery')

Answer 2

一种方法：

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

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

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

2 个答案: