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

【问题标题】：Get textbox value through button in popup通过弹出窗口中的按钮获取文本框值
【发布时间】：2013-05-30 20:05:59
【问题描述】：

我是 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”，但我遇到了同样的问题。

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

【问题讨论】：

标签： javascript jquery google-chrome-extension

【解决方案1】：

一种方法：

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

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

【讨论】：

谢谢！它解决了我的两个问题。通过发送解决它： document.getElementById('button1').addEventListener('click', function() { myAlert(document.getElementById('userQuery').value); });

【解决方案2】：

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

而不是document.getElementById('userQuery')

【讨论】：

嗨，Ramesh，这两种选择都让我空白