EventListener函数中的操作在执行后被恢复

2022-04-15 00:00:00 javascript html addeventlistener

我对Java脚本相当陌生，目前正在尝试用它做一些事情。我偶然发现了W3School的一个教程，教你如何在按下按钮后改变它的颜色。

我想做一些类似的事情，但在按下按钮时加载另一个页面，其中包含一些搜索查询结果。

我的html代码如下：

<html>
    <head>
        <meta charset = "utf-8">
        <title>Test</title>
        <script type="text/javascript" src="search.js" defer></script>
    </head>
    
    <body>
        <header>
            <h1>Test</h1>
        </header>   
        
        <main>
            
            <form> 
                <input type="search" id="query" placeholder="Search...">
                <button id="submit">Search</button>
            </form>

        </main>
        
    </body>
</html>

下面是相应的Java脚本代码：

const searchbutton = document.getElementById("submit");
searchbutton.addEventListener("click", testmethod);

function testmethod() {
    window.location.href="search.html";
}

代码本身似乎可以正常工作，但每当按下按钮时，earch.html页面就会在瞬间加载，然后恢复到原来的状态。我甚至直接复制了W3School教程中的代码，但它仍然不起作用。你知道是什么原因导致页面在按下按钮后变回原处吗？

提前谢谢！

解决方案

更改位置或提交表单将(重新)加载(目标)页面-您正在同时执行这两项操作。

您可以通过传入事件并在测试方法中使用vent.prevenentDefault()开始，然后执行除更改位置之外的其他操作

我强烈建议不要将事件分配给提交按钮，而应使用提交事件

您还需要包装在页面加载事件侦听器中，或者将脚本移动到表单后面

也不要在表单中调用任何提交

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function testmethod(e) {
  e.preventDefault(); // stop submission
  console.log(this.query.value);
  this.subbut.style.color = "red";
}
window.addEventListener("load", function() {
  document.getElementById("myForm").addEventListener("submit", testmethod);
});

<main>

  <form id="myForm">
    <input type="search" name="query" id="query" placeholder="Search...">
    <button name="subbut">Search</button>
  </form>

</main>

如果您不需要提交表单，请使用type="；Button"；而不使用表单

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

function testmethod(e) {
  console.log(document.getElementById("query").value)
  this.style.color = "red";
}

window.addEventListener("load", function() {
  document.getElementById("subbut").addEventListener("click", testmethod);
});

<main>
  <input type="search" id="query" placeholder="Search...">
  <button type="button" id="subbut">Search</button>
</main>

相关文章