单击按钮时未执行 Javascript 代码答案

【问题标题】：Javascript code not being executed on button click单击按钮时未执行 Javascript 代码
【发布时间】：2015-02-05 15:07:21
【问题描述】：

我有一些 html 和一些应该在文本框中输入的 javascript 代码，然后打开一个新选项卡，其中包含文本框中任何内容的 Wikipedia 页面。但是，我将其用作扩展程序，而 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>

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

【问题讨论】：

我想你的意思是document.getElementById("pageName")。
改变了，什么也没发生。我仍然没有输出。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

您可以做的是将您的 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 不是变量。

【讨论】：

Chrome 扩展程序将不起作用，并且当脚本使用“onclick”或包含在 head 标签中时会引发错误。
道歉 - 请检查修订。希望这有效:)
太棒了！我从console.log() 获得控制台输出，但没有打开新页面。你对此有什么建议吗？
在我的浏览器中，搜索是在当前选项卡中打开的，但会打开一个带有“随机”维基百科页面的新选项卡。这是因为您的 <a> 标记未关闭。要解决这个问题，你应该输入<a href="http://en.wikipedia.org/wiki/Special:Random/" target="_blank">$Enter page to lookup: </a> <input type="text" id="pageName" /><br />（注意最后的结束标签）
就是这样！非常感谢！

【解决方案2】：

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

【讨论】：

我将类型更改为“按钮”，但仍然一无所获。我是否也必须更改“价值”？
还请注意，在您的搜索功能中，您定义了两次 temp，只定义了一次变量
脚本根本没有被执行。我尝试将它移动到身体的顶部，但我得到一个“未捕获的 TyepError”
编辑后我把脚本移到了body标签的顶部，但是现在链接、按钮、文本和文本框已经完全消失了
听起来脚本正在运行。您的 console.log 上还缺少一个可能导致问题的分号

【解决方案3】：

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

【讨论】：