从您的网站在 Google 上进行搜索的搜索栏

Question

我添加了一个输入搜索栏，它接受用户输入的文本并在谷歌上搜索，但不知何故它不起作用。我试着通过设置一个在img点击时触发的警报函数来调试问题是否来自搜索按钮，结果很好。这意味着问题来自我的javascript函数。搜索本应起作用，但没有起作用。作为一个附带问题，有没有办法通过target_it在不同的选项卡上打开搜索结果。如有任何帮助，我们将不胜感激。提前谢谢。

function searchGoogle() {
document.getElementById("searchButton").href =
(("https://www.google.com/search?q=") + (document.getElementById("searchInput").value));
}

.form-group {
width: 70%;
position: absolute;
top: 3%;
left: 5%;
}
.form-group img {
width: 10%;
position: absolute;
top: 10%;
right: 5%;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

<div class="form-group">
<input type="text" class="form-control" id="searchInput" placeholder="Google Search">
<img id="searchButton" src="https://img.icons8.com/material-outlined/128/000000/search--v1.png" onclick="searchGoogle()" />
</div>

Answer 1

快速修复：

let searchGoogle; // for use on other loads
addEventListener('load', ()=>{
const searchInput = document.getElementById('searchInput'); // why get it again?
searchGoogle = ()=>{
location = 'https://www.google.com/search?q='+searchInput.value;
}
});