Actions in eventlistener function is reverted after being executed-CodePudding

I am rather new to Javascript and am currently trying some stuff out with it. I stumbled upon a tutorial in w3schools on how to change the color of a button after pressing it.

I wanted to do something similar, but instead load another page with some search query results when the button is pressed.

My html code for this is the following:

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

And here is the corresponding javascript code:

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

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

The code itself seems to be working, but whenever the button is pressed, the search.html page loads for a split second before reverting back. I even copied the code from the w3schools tutorial directly but it's still not working. Any idea what causes the page to get changed back after the button is pressed?

Thanks in advance!

CodePudding user response：

Change location or submitting a form will (re)load the (target) page - you are doing BOTH.

You can start by passing in the event and using event.preventDefault() in the testmethod and then do something else than changing location

I strongly suggest to NOT assign events to a submit button, instead use the submit event

You also need to wrap in a page load event listener or move the script to after the form

ALSO never call anything submit in a form

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>

If you do not need to submit the form, use a type="button" and no form

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>