I am new to JavaScript and decided to do some practice. I wanted to create a webpage that allows users to select the number of products they want to buy, using plus and minus buttons. The program was supposed to increment or decrement the input value based on the button clicked. Check out the webpage image
Everything was working fine until I added an if statement to restrict the user from entering more than 4 tickets or less than 0 tickets. However, this code did not produce any results and I noticed a flashing error in the Chrome developer tools. Can anyone provide some assistance with this issue?
<!DOCTYPE html>
<html>
<head>
<style>
.myButton {
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
background-color:#5cbf2a;
}
.myButton:active {
position:relative;
top:1px;
}
</style>
<script>
function plus(){
document.getElementById("htop").value=Number(document.getElementById("htop").value)+1;
}
function minus(){
document.getElementById("htop").value=Number(document.getElementById("htop").value)-1;
}
function validate(){
if(Number(document.getElementById("htop").value)<=0){
alert("You can not submit less than NULL tickets");
return false;
}
else if(Number(document.getElementById("htop").value)>4){
alert("you can not buy more than 4 tickets at once");
return false;
}
else{
alert("you may proceed");
return true;
}
}
</script>
</head>
<body >
<form>
<button id="plus" class="myButton" onclick="plus()">+</button>
<button id="minus" class="myButton" onclick="minus()">-</button>
<input type="text" id="htop" value="0" />
<br>
<input type="submit" value="Submit" onclick="validate()">
</form>
</body>
</html>