搜索谷歌的输入答案

【问题标题】：Input that searches google搜索谷歌的输入
【发布时间】：2018-11-02 20:10:59
【问题描述】：

我正在为我的 Chromebook 制作一个扩展主题，用于搜索编码网站（例如这个网站、w3schools 等）。我是如何做到的？到目前为止，这是我的代码：

<html>
<head>
</head>
<body>    
<input id="input1">
<button onclick="searchGoogle()">Search Google</button>
<script>
function searchGoogle() {
        var one = document.getElementById("input1").value;
        var two = 'http://www.google.com/search?q=' + one;
        window.location = two;
    }
</script>
</body>
</html>

我的代码不起作用

运行时会弹出：

(Image of my code running)

我的代码错了吗？

我们将不胜感激。

编辑

<html>
<head>
<script src="searchgoogle.js">
</script>
</head>
<body>    
<input id="input1">
<button id="link">Search Google</button>

</body>
</html>

和

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {

        function searchGoogle() {
        var one = document.getElementById("input1").value;
        var two = 'https://www.google.com/search?q=' + one;
        window.location = two;
    }


    });
});

也没有用

【问题讨论】：

尝试将链接更改为 https.. 可以吗？
那么它到底是如何不起作用的呢？屏幕截图看起来像您期望该表单的样子。点击按钮会发生什么？
onClick within Chrome Extension not working的可能重复
不，我认为这与链接无关
Iván Nokonoko 的回答回答了我的问题

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

【解决方案1】：

您在侦听器函数中声明了函数searchGoogle，但它从未被调用。尝试：

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('link');
    // onClick's logic below:
    link.addEventListener('click', function() {

        //there is no need to declare a new function here.

        var one = document.getElementById("input1").value;
        var two = 'https://www.google.com/search?q=' + encodeURIComponent(one);
        window.location = two;



    });
});

【讨论】：