Javascript 单击按钮时未执行代码

Question

我有一些 html 和一些 javascript 代码应该在文本框中输入，然后打开一个新选项卡，其中包含文本框中任何内容的维基百科页面。但是，我将其用作扩展，google chrome 不允许内联 javascript。 page.js

document.getElementById("search").addEventListener("click", searchPage);

function searchPage() {
    console.log("test")
    var temp = document.getElementById(pageName);
    var temp = temp.value;
    var myPage = "http://en.wikipedia.org/wiki/" + temp;
    window.location.replace(myPage);
}

popup.html

<!DOCTYPE html>
<html>
    <body>
        <a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">Random</a>
        Enter page to lookup: <input type="text" id="pageName" /><br />
        <input type="submit" value="Submit" id="search" />
        <script src="./page.js></script>
    </body>
</html>

有人知道为什么这不起作用吗？

Answer 1

输入类型提交正在尝试提交表单。您需要向该提交按钮添加一个操作，或者您可以将其更改为一个按钮，事件将触发。

Answer 2

您的 click 事件侦听器无法工作，因为它尚未加载。或者换句话说，您需要确保此行 <script src="./page.js></script> 正确指向 page.js.

Answer 3

您可以做的是将您的 JS 包含在您的 HTML <head> 标记中，并向您的按钮添加一个 onClick 属性，如下所示：

    <!DOCTYPE html>
<html>
    <body>
        <a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$
        Enter page to lookup: <input type="text" id="pageName" /><br />
        <input type="submit" value="Submit" id="search" />
        <script src="./page.js"></script>
    </body>
</html>

我认为问题是在您的原始代码中，您有 <script src="./page.js></script> 而不是 <script src="./page.js"></script>

然后您可以将 javascript 更改为以下内容：

document.getElementById('search').addEventListener('click', searchPage);

function searchPage() {
    console.log("hjabdfs");
    var temp = document.getElementById('pageName');
    var temp = temp.value;
    var myPage = "http://en.wikipedia.org/wiki/" + temp;
    window.location.replace(myPage);
}

请注意，我还将 var temp = document.getElementById(pageName) 更改为 var temp = document.getElementById('pageName')，因为 pageName 不是变量。

Javascript 单击按钮时未执行代码

Javascript code not being executed on button click

html

javascript

google-chrome

google-chrome-extension