Question 259190 in Javascript Question posted in
A very good W3school tutorial can be found here.

how to work with navigation properly in javascript for button click?

I am trying to apply the code below to navigate. but the problem is, it is not working on a single click.
it starts working on second click. plase help me to understand the problem for not working on first click.

function handlePurchaseBtn() {
  document.getElementById('go-home-btn').addEventListener('click', function() {
    window.location = 'https://www.google.com'
  })
}
Tags:

3

Answers


  1. 0

    Trabajar correctamente con la navegación en JavaScript al hacer clic en un botón implica manipular el DOM y gestionar los eventos de forma eficiente:

    Debes asegurarte de que tengas un buen conocimiento de HTML, CSS y, por supuesto, JavaScript. Veamos un ejemplo simple de cómo podrías trabajar con la navegación al hacer clic en un botón:

    Supongamos que tienes un botón en tu página HTML: <button id="myButton">Ir a la página siguiente</button>

    Ahora, puedes utilizar JavaScript para agregar un evento de clic a este botón y redirigir al usuario a otra página:

    // Obtén una referencia al botón var myButton = document.getElementById("myButton"); // Agrega un evento de clic al botón myButton.addEventListener("click", function() { // Aquí puedes realizar cualquier lógica necesaria antes de la redirección // Por ejemplo, validar datos o hacer alguna acción específica // Luego, redirige al usuario a la página deseada window.location.href = "pagina-siguiente.html"; });

    En este ejemplo, primero obtenemos una referencia al botón mediante su ID y luego agregamos un evento de clic. Dentro de la función del evento, puedes realizar cualquier lógica necesaria antes de la redirección, como validar datos o realizar acciones específicas. Finalmente, utilizamos window.location.href para redirigir al usuario a la página siguiente.

    Login or Signup to reply.
  2. 0

    Should be the other way around – if that’s the desired:

    function handlePurchaseBtn(evt) { 
  evt.preventDefault(); // If needed, to prevent a default browser action
  window.location = "https://www.google.com";
}

document.getElementById("go-home-btn").addEventListener("click", handlePurchaseBtn);

    With the above solution make sure to remove the inline HTML attribute onclick="handlePurchaseBtn()" from your button:
    <button id="go-home-btn" type="button">Go home</button>

    Login or Signup to reply.
  3. 0

    Simply creates a one function

    function handlePurchaseBtn() {
    window.location.href = 'https://www.google.com';
}

    Now pass this function to button tag

    <button onclick=“handlePurchaseBtn()”>Purchase</button>

    Now this function is working when you click on the button.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search