Question

我有一些html和一些javascript代码应该在文本框中输入，并打开一个新的选项卡，其中包含文本框中的任何内容。但是，我使用此作为扩展程序，谷歌浏览器不允许内联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代码

3 个答案: