I have an index.html with navigation bar, another html file for shopping basket and basket.js/ basket.css files. When you click on button basket in index.html you show the Basket.html file.how can i make it work?
I tried the following:
index.html:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/basket.css">
<title>Product List</title>
</head>
<body>
<div class="navbar" style="overflow:hidden; background-color:#009650; position:fixed; top:0; width:100%;" >
<button id="basket-button" onclick="window.location.href='/Basket.html'"> Basket </button>
<script src="js/Basket.js"></script>
</body>
Basket.html:
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/basket.css">
<title>Basket</title>
</head>
<div class="basket" id="shopping-basket">
<div class="item">
<div class="buttons">
<span class="delete-btn"></span>
<span class="like-btn"></span>
</div>
<div class="image">
</div>
<div class="description">
<span>product name</span>
</div>
<div class="quantity">
<button class="plus-btn" type="button" name="button">
</button>
<input type="text" name="name" value="1">
<button class="minus-btn" type="button" name="button">
</button>
</div>
<div class="total-price"></div>
<script src="js/Basket.js"></script>
Basket.js:
window.onload = () => {
document.getElementById("basket-button").onclick = function() {myFunction()};
function myFunction() {
document.getElementById("shopping-basket").classList.toggle("show");
}
}
basket.css:
.basket{ display: none;}
.basket.show {display:block;
position: absolute;
left:80%;
margin-top: 30px;
padding: 5px;
background-color: #43484D;}
.basket.hide {
display:none;
}