A simple buttons to show increment and decement
<html>
<head>
<style>
// css goes here
.button{
background-color: white;
color: grey;
width:40px;
background-color: grey;
font-size: 20px;
font-family: Century Gothic ;
display: inline;
margin: auto;
border: 1px solid grey;
padding: 10px;
cursor: pointer;
}
#increment{
font-size: 100px;
font-family: 'Century Gothic';
text-align: center;
margin-top: 20%;
}
.box{
width: 500px;
height: 400px;
border-radius: 5%;
box-shadow: 2px 0px 2px 2px grey;
padding: 30px;
text-align: center;
margin: auto;
}
</style>
</head>
<body>
<!-- Body goes here -->
<div class = "box">
<div class = "button" onclick = "myIncrement()">Increment !</div>
<div class = "button" onclick = "myDecrement()">Decrement !</div>
<div id = "increment">0</div>
</div>
<script>
alert("click on increment and decrement button");
// Javascript goes here
var x = 0; //...global variable
function myIncrement(){
++x;
document.getElementById("increment").innerHTML = x;
}
function myDecrement(){
--x;
document.getElementById("increment").innerHTML = x;
}
</script>
</body>
</html>
Image Preview
We noticed you have ad blocker!
Please support CoderCrunch by allowing Ads.
Our website serves minimal ads, to keep your learning experience optimal. We thank you for being our subscriber and wish you all the best in your coding journey.
We have noticed you have ad blocker!
Please turn if off in order to continue...
Our website serves minimal ads to keep your learning experience optimal while helping us to support this initiative.
We thank you and
appreciate you being our subscriber and wish all the best in your coding and interview preparation journey.