<!DOCTYPE html>
<html>
<title>Online HTML Editor</title>
<head>
<script>
const plus = document.querySelector(".plus"),
minus = document.querySelector(".minus"),
num = document.querySelector(".num");
let a = 1;
plus.addEventListener("click", ()=>{
a++;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
});
minus.addEventListener("click", ()=>{
if(a > 1){
a--;
a = (a < 10) ? "0" + a : a;
num.innerText = a;
}
});
</script>
<style>
.wrapper{
height: 120px;
min-width: 380px;
display: flex;
align-items: center;
justify-content: center;
background: #FFF;
border-radius: 12px;
box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.wrapper span{
width: 100%;
text-align: center;
font-size: 55px;
font-weight: 600;
cursor: pointer;
user-select: none;
}
.wrapper span.num{
font-size: 50px;
border-right: 2px solid rgba(0,0,0,0.2);
border-left: 2px solid rgba(0,0,0,0.2);
pointer-events: none;
}
</style>
</head>
<body>
<div class="wrapper">
<span class="minus">-</span>
<span class="num">01</span>
<span class="plus">+</span>
</div>
</body>
</html>
i copied this code from a tutorial video from youtube, its working in the video but i have no idea why it isnt on my end. My idea is to add this button in a shopping cart to let the user choose the quantity. Although this increment or decrement isnt actually linked to the cart but its just put there for a show for my school project. Any idea whats happening?
i tried making the script or css external but its still not working