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>

相关文章