Javascript button click listereners didn't redirect me to another page-CodePudding

i'm creating a shop cart and i started with a home page with 3 buttons I had a little problem with redirecting those buttons to another pages here's my html and javascript codes

I tried every possibility of redirection on 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 >
        <div >
            <h1>Who said women need therapy &#128530;,
                <br> <br> We need shopping &#129297;
            </h1>
        </div>
        <div >
            <div >
                <span>Create an account?</span>
                <button type="button"  id="btn1f">Sign In</button>
            </div>
            
            <div >
                <span>You're a customer &#128526;</span>
                <button type="button"  id="btn2s">Go Shopping</button>
            </div>
            
            <div >
                <span>Not Interested</span>
                <button onclick="redirect()" type="button"  id="btn3g">Go Back</button>
            </div>
            
        </div>
    </section>

CodePudding user response：

<!-- 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 >
        <div >
            <h1>Who said women need therapy &#128530;,
                <br> <br> We need shopping &#129297;
            </h1>
        </div>
        <div >
            <div >
                <span>Create an account?</span>
                <button type="button"  id="btn1f">Sign In</button>
            </div>
            
            <div >
                <span>You're a customer &#128526;</span>
                <button type="button"  id="btn2s">Go Shopping</button>
            </div>
            
            <div >
                <span>Not Interested</span>
                <button type="button"  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;
    });    
}

CodePudding user response：

You have warpped the click listeners inside named functions and call those function onclick. So First time you click on a button the listeners is being attached and the second time, the listener will work (however second click also attachs another listener). So omit one of onclick or addEventListener one of them is enough. I prefer deleting named functions and onclick and just attach listeners (They should be attached at the end of document or after window load)

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 >
        <div >
            <h1>Who said women need therapy &#128530;,
                <br> <br> We need shopping &#129297;
            </h1>
        </div>
        <div >
            <div >
                <span>Create an account?</span>
                <button type="button"  id="btn1f">Sign In</button>
            </div>
            
            <div >
                <span>You're a customer &#128526;</span>
                <button type="button"  id="btn2s">Go Shopping</button>
            </div>
            
            <div >
                <span>Not Interested</span>
                <button type="button"  id="btn3g">Go Back</button>
            </div>
            
        </div>
</section>