Question

我从该站点获得了一个用于搜索栏的简单代码，我想向其中添加一个功能，以便当用户单击搜索栏上的搜索图标时，它将它们重定向到URL。这是代码

<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
      <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-search-13" viewBox="0 0 40 40">
    <path d="M26.804 29.01c-2.832 2.34-6.465 3.746-10.426 3.746C7.333 32.756 0 25.424 0 16.378 0 7.333 7.333 0 16.378 0c9.046 0 16.378 7.333 16.378 16.378 0 3.96-1.406 7.594-3.746 10.426l10.534 10.534c.607.607.61 1.59-.004 2.202-.61.61-1.597.61-2.202.004L26.804 29.01zm-10.426.627c7.323 0 13.26-5.936 13.26-13.26 0-7.32-5.937-13.257-13.26-13.257C9.056 3.12 3.12 9.056 3.12 16.378c0 7.323 5.936 13.26 13.258 13.26z"
    fill-rule="evenodd" />
      </symbol>
      <symbol xmlns="http://www.w3.org/2000/svg" id="sbx-icon-clear-3" viewBox="0 0 20 20">
    <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z" fill-rule="evenodd" />
     </symbol>
    </svg>

    <form novalidate="novalidate" onsubmit="return false;" class="searchbox sbx-custom">
      <div role="search" class="sbx-custom__wrapper">
    <input type="search" name="search" placeholder="Search your website" autocomplete="off" required="required" class="sbx-custom__input">
    <button type="submit" title="Submit your search query." class="sbx-custom__submit">
      <svg role="img" aria-label="Search">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-search-13"></use>
      </svg>
    </button>
        <button type="reset" title="Clear the search query." class="sbx-custom__reset">
      <svg role="img" aria-label="Reset">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#sbx-icon-clear-3"></use>
      </svg>
    </button>
      </div>
    </form>
    <script type="text/javascript">
      document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {  this.parentNode.querySelector('input').focus();});
</script>

我对JavaScript一无所知。有人可以告诉我我该怎么做，最重要的是我要在哪里放置代码？

Answer 1

您可以在head内或body内的任何位置添加javascript代码。理想的方法是在所有其他HTML之后，在body标记结束之前添加JS代码。

关于所需功能，您的代码

document.querySelector('.searchbox [type="reset"]').addEventListener('click', function() {  this.parentNode.querySelector('input').focus();});

清除搜索输入并在单击按钮reset时将其聚焦。

要使您的“提交”按钮重定向到某个地方，我们需要更多信息，但总体思路如下：

document.querySelector('.searchbox button[type="submit"]').addEventListener('click', function() {  window.location.assign('your url here');});

这会将用户带到该URL，然后他们可以通过点击返回到上一页。

如果您使用window.location.replace()会做同样的事情，但是旧页面的历史记录将被新的URL代替。

如何在我的搜索栏中添加onclick功能

1 个答案: