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 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;
});
}
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 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>