当前位置： 文江博客话题详情

在页面中的第二个搜索栏的JavaScript不起作用

发布于 2025-02-10 18:42:46 字数 2848 浏览 1 评论 0原文

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

第一个搜索栏效果很好，但是第二个搜索栏只是将搜索查询附加到主要域，而不是打开单独的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>
原文

I have two separate search bars on a single html page. The logic of the code is for a google search to be initiated on a new window, using whatever search item is entered.

The first search bar works just fine, however the second one instead just appends the search query to the main domain, instead of opening a separate google search.

It is exactly the same codes, only the IDs are changed. I don't know why the second search does not work as expected. Please help.

<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>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

驱逐舰岛风号 2025-02-17 18:42:46

如果您想坚持使用此设计（我不建议）更改这些变量名称：否则，您会覆盖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>

You're overwriting f,g,and google if you want to stick to this design (which i do not recommend) change those variables names :

<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>

otherwise, change your code a little like so :

<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>
回复 原文
~没有更多了~

关于作者

a√萤火虫的光℡

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

李珊平

文章 0 评论 0

Quxin

文章 0 评论 0

范无咎

文章 0 评论 0

github_ZOJ2N8YxBm

文章 0 评论 0

若言

文章 0 评论 0

南…巷孤猫

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文