页面中第二个搜索栏的Javascript不工作

Question

我在一个html页面上有两个独立的搜索栏。代码的逻辑是在一个新窗口上启动google搜索，使用输入的任何搜索项。

第一个搜索栏工作得很好，但是第二个只是将搜索查询附加到主域名，而不是打开一个单独的谷歌搜索。

是完全相同的代码，只是id改变了。我不知道为什么第二次搜索没有像预期的那样工作。请帮助。

<h1>Search button 1</h1>
<form class="searchimage" role="search" id="form">
<input class="searchimageinput" type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton">
<svg class="searchimagesvg" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=';
function submitted(event) {
event.preventDefault();
const url = google + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>

<h1>Search button 2</h1>
<div class="searchcontainer">
<form class="searchimage1" role="search" id="form2">
<input class="searchimageinput1" type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton1">
<svg class="searchimagesvg1" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
</div>
<script>
const f = document.getElementById('form2');
const q = document.getElementById('query2');
const google = 'https://www.google.com/search?q=';
function submitted(event) {
event.preventDefault();
const url = google + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>

Answer 1

如果你想坚持这种设计(我不建议)，你会覆盖f,g和google，更改这些变量名称:

<h1>Search button 1</h1>
<form class="searchimage" role="search" id="form">
<input class="searchimageinput" type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton">
<svg class="searchimagesvg" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const google = 'https://www.google.com/search?q=';
function submitted(event) {
event.preventDefault();
const url = google + '+' + q.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', submitted);
</script>

<h1>Search button 2</h1>
<div class="searchcontainer">
<form class="searchimage1" role="search" id="form2">
<input class="searchimageinput1" type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton1">
<svg class="searchimagesvg1" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
</div>
<script>
const ff = document.getElementById('form2');
const qq = document.getElementById('query2');
const googlee = 'https://www.google.com/search?q=';
function submitted(event) {
event.preventDefault();
const url = googlee + '+' + qq.value;
const win = window.open(url, '_blank');
win.focus();
}
ff.addEventListener('submit', submitted);
</script>

否则，更改代码如下:

<h1>Search button 1</h1>
<form class="searchimage" role="search" id="form">
<input class="searchimageinput" type="search" id="query" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton">
<svg class="searchimagesvg" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
<h1>Search button 2</h1>
<div class="searchcontainer">
<form class="searchimage1" role="search" id="form2">
<input class="searchimageinput1" type="search" id="query2" name="q" placeholder="Enter your image URL here" aria-label="Search through site content">
<button class="searchimagebutton1">
<svg class="searchimagesvg1" viewBox="0 0 1024 1024"><path class="path1" d="M848.471 928l-263.059-263.059c-48.941 36.706-110.118 55.059-177.412 55.059-171.294 0-312-140.706-312-312s140.706-312 312-312c171.294 0 312 140.706 312 312 0 67.294-24.471 128.471-55.059 177.412l263.059 263.059-79.529 79.529zM189.623 408.078c0 121.364 97.091 218.455 218.455 218.455s218.455-97.091 218.455-218.455c0-121.364-103.159-218.455-218.455-218.455-121.364 0-218.455 97.091-218.455 218.455z"></path></svg>
</button>
</form>
</div>
<script>
const f = document.getElementById('form');
const q = document.getElementById('query');
const f2 = document.getElementById('form2');
const q2 = document.getElementById('query2');
const google = 'https://www.google.com/search?q=';
function submitted(event,query) {
event.preventDefault();
const url = google + '+' + query.value;
const win = window.open(url, '_blank');
win.focus();
}
f.addEventListener('submit', (e)=>submitted(e,q));
f2.addEventListener('submit', (e)=>submitted(e,q2));
</script>