頁面中第二個搜索欄的Javascript不起作用-有解無憂

我在一個 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>

uj5u.com熱心網友回復：

如果您想堅持這種設計（我不推薦），您將覆寫 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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/496336.html

標籤：javascript html 形式搜索输入

上一篇：使按鈕與另一個按鈕動態保持距離

下一篇：嘗試將3個wtforms欄位與自定義函式進行比較并遇到遞回問題