Question #303409
Achieve the given functionality using JS.
- When the HTML button element with the id decreaseBtn is clicked,
- If the count is odd then decrease the counter value by -1 as shown in the image.
- If the count is even then decrease the counter value by -2 as shown in the image.
- When the HTML button element with the id increaseBtn is clicked,
- If the count is odd then increase the counter value by 10 as shown in the image.
- If the count is even then increase the counter value by 5 as shown in the image.
- When the HTML button element with the id resetBtn is clicked,
- Set counter value as 0.
Expert's answer
<!DOCTYPE html>
<html>
<head></head>
<body>
<style>
.counter-value {
font-size: 36px;
font-weight: 900;
}
.button {
color: #ffffff;
background-color: #0967d2;
font-size: 14px;
border-width: 0;
border-radius: 4px;
padding: 10px;
}
</style>
<p id="counterValue" class="counter-value">0</p>
<button id="decreaseBtn" class="button" onclick="onDecrement()">DECREASE</button>
<button id="resetBtn" class="button" onclick="onReset()">RESET</button>
<button id="increaseBtn" class="button" onclick="onIncrement()">INCREASE</button>
<script>
const counterValue = document.querySelector('#counterValue'),
descreaseBtn = document.querySelector('#descreaseBtn'),
resetBtn = document.querySelector('#resetBtn'),
increaseBtn = document.querySelector('#increaseBtn');
function onReset() {
counterValue.innerHTML = 0
}
function onDecrement() {
if (+counterValue.innerHTML % 2 == 1) {
counterValue.innerHTML = +counterValue.innerHTML - 1;
} else {
counterValue.innerHTML = +counterValue.innerHTML - 2
}
}
function onIncrement() {
if (+counterValue.innerHTML % 2 == 1) {
counterValue.innerHTML = +counterValue.innerHTML + 10;
} else {
counterValue.innerHTML = +counterValue.innerHTML + 5;
}
}
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
Comments