Estoy creando un carrito de compras y comencé con una página de inicio con 3 botones. Tuve un pequeño problema al redirigir esos botones a otras páginas. Aquí están mis códigos html y javascript.
Probé todas las posibilidades de redirección en javascript :(
function inscription(){ var myForm = "inscription-form.html"; document.getElementById("btn1f").addEventListener('click' , function () { window.location.replace(myForm); }); } // redirect my second button var myShop = "http://www.google.com"; document.getElementById("btn2s").addEventListener('click' , function () { window.location.replace(myShop); }); // redirect my third button function redirect(){ var myGoogle = "http://www.google.com"; document.getElementById("btn3g").addEventListener('click' , function () { window.location.replace(myGoogle); }); } <section class="body-container"> <div class="container-item title"> <h1>Who said women need therapy 😒, <br> <br> We need shopping 🤑 </h1> </div> <div class="container-item buttons"> <div class="button-1"> <span>Create an account?</span> <button type="button" class="btn" id="btn1f">Sign In</button> </div> <div class="button-2"> <span>You're a customer 😎</span> <button type="button" class="btn" id="btn2s">Go Shopping</button> </div> <div class="button-3"> <span>Not Interested</span> <button onclick="redirect()" type="button" class="btn" id="btn3g">Go Back</button> </div> </div> </section><!-- html --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>title</title> <script src="js.js"></script> </head> <body> <section class="body-container"> <div class="container-item title"> <h1>Who said women need therapy 😒, <br> <br> We need shopping 🤑 </h1> </div> <div class="container-item buttons"> <div class="button-1"> <span>Create an account?</span> <button type="button" class="btn" id="btn1f">Sign In</button> </div> <div class="button-2"> <span>You're a customer 😎</span> <button type="button" class="btn" id="btn2s">Go Shopping</button> </div> <div class="button-3"> <span>Not Interested</span> <button type="button" class="btn" id="btn3g">Go Back</button> </div> </div> </section> </body> </html> //below into js.js file window.onload = function() { var myShop = "http://www.google.com"; document.getElementById("btn2s").addEventListener('click' , function () { window.location.href = myShop; }); var myGoogle = "http://www.google.com"; document.getElementById("btn3g").addEventListener('click' , function () { window.location.href = myGoogle; }); var myForm = "inscription-form.html"; document.getElementById("btn1f").addEventListener('click' , function () { window.location.href = myForm; }); }Ha deformado los oyentes de clics dentro de funciones con nombre y llama a esas funciones onclick. Entonces, la primera vez que hace clic en un botón, los oyentes se adjuntan y la segunda vez, el oyente funcionará (sin embargo, el segundo clic también adjunta otro oyente). Así que omita uno de onclick o agregueEventListener uno de ellos es suficiente. Prefiero eliminar funciones con nombre y hacer clic y simplemente adjuntar oyentes (deben adjuntarse al final del documento o después de cargar la ventana)
window.onload=function(){ var myForm = "inscription-form.html"; document.getElementById("btn1f").addEventListener('click' , function () { window.location.replace(myForm); }); var myShop = "http://www.google.com"; document.getElementById("btn2s").addEventListener('click' , function () { window.location.replace(myShop); }); // redirect my third button var myGoogle = "http://www.google.com"; document.getElementById("btn3g").addEventListener('click' , function () { window.location.replace(myGoogle); }); } <section class="body-container"> <div class="container-item title"> <h1>Who said women need therapy 😒, <br> <br> We need shopping 🤑 </h1> </div> <div class="container-item buttons"> <div class="button-1"> <span>Create an account?</span> <button type="button" class="btn" id="btn1f">Sign In</button> </div> <div class="button-2"> <span>You're a customer 😎</span> <button type="button" class="btn" id="btn2s">Go Shopping</button> </div> <div class="button-3"> <span>Not Interested</span> <button type="button" class="btn" id="btn3g">Go Back</button> </div> </div> </section>