Soy bastante nuevo en Javascript y actualmente estoy probando algunas cosas con él. Me topé con un tutorial en w3schools sobre cómo cambiar el color de un botón después de presionarlo.
Quería hacer algo similar, pero en su lugar cargar otra página con algunos resultados de consulta de búsqueda cuando se presiona el botón.
Mi código html para esto es el siguiente:
<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>Y aquí está el código javascript correspondiente:
const searchbutton = document.getElementById("submit"); searchbutton.addEventListener("click", testmethod); function testmethod() { window.location.href="search.html"; }El código en sí parece estar funcionando, pero cada vez que se presiona el botón, la página search.html se carga durante una fracción de segundo antes de volver atrás. Incluso copié el código del tutorial de w3schools directamente, pero aún no funciona. ¿Alguna idea de qué hace que la página vuelva a cambiar después de presionar el botón?
¡Gracias por adelantado!
Cambiar de ubicación o enviar un formulario (re)cargará la página (objetivo); está haciendo AMBAS cosas.
Puede comenzar pasando el evento y usando event.preventDefault() en el método de prueba y luego hacer algo más que cambiar la ubicación
Sugiero encarecidamente NO asignar eventos a un botón de envío, sino usar el evento de envío
También debe incluir un detector de eventos de carga de página o mover el script después del formulario.
TAMBIÉN nunca llame a nada enviar en un formulario
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>Si no necesita enviar el formulario, use type="button" y ningún formulario
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>