Reputation: 113
I need increment and decrement a counter when click the buttons.
const checkbox = document.getElementById('cb_enabled'),
increment = document.getElementById('btn_increment'),
decrement = document.getElementById('btn_decrement'),
counter = document.getElementById('js-counter').innerHTML;
checkbox.addEventListener("change", function(checkbox) {
if (this.checked === false) {
increment.disabled = true;
decrement.disabled = true;
} else {
increment.disabled = false;
decrement.disabled = false;
}
});
increment.onclick = () => {
counter.innerHTML = 1;
}
decrement.onclick = () => {
counter.innerHTML = 0;
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>
<label for="cb_enabled">
Enable/Disable counter
<input id="cb_enabled" type="checkbox" checked />
</label>
But I don't know how to increase and decrease the number (in this case, the element into js-counter). Any ideas?
Upvotes: 2
Views: 1935
Reputation: 230
I can give you functionality for increment and decrement counter from my ReactNative.Below There is Functionality for your HTML Project
const [num, setNum] = useState(0);
function incre() {
setNum(num + 1);
}
function decre() {
if (num > 0) {
setNum(num - 1);
} else {
Alert.alert('zero is the limit');
}
Now Just Display the counter in the Div or View of the Application and Call the function on CLick or Press the Button.
<View style={{width: '100%'}}>
<Text>
Count
</Text>
<Text>
{num}
</Text>
<TouchableOpacity
style={{alignSelf: 'center'}}
onPress={() => {
incre();
decre();
}}>
</TouchableOpacity>
if it is a button in HTML
<button id="btn_decrement" type="button" onclick={() => {
incre();
}}>> Decrement </button>
<button id="btn_increment" type="button" onclick={() => {
decre();
}}>> Decrement </button>
Functionality for your HTML;
function incre() {
var num=num+1;
}
function decre() {
var num=num-1;
}
Upvotes: 0
Reputation: 18116
Keep reference to the counter element and not to it's innerHTML property and also don't forget to parseInt
the string value before incrementing.
const checkbox = document.getElementById('cb_enabled'),
increment = document.getElementById('btn_increment'),
decrement = document.getElementById('btn_decrement'),
counter = document.getElementById('js-counter');
checkbox.addEventListener("change", function(checkbox) {
if (this.checked === false) {
increment.disabled = true;
decrement.disabled = true;
} else {
increment.disabled = false;
decrement.disabled = false;
}
});
increment.onclick = () => {
const num = parseInt(counter.innerHTML);
counter.innerHTML = num + 1;
}
decrement.onclick = () => {
const num = parseInt(counter.innerHTML);
counter.innerHTML = num - 1;
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>
<label for="cb_enabled">
Enable/Disable counter
<input id="cb_enabled" type="checkbox" checked />
</label>
Upvotes: 3
Reputation: 1349
The issue was with the counter initialization
counter = document.getElementById("js-counter").innerHTML
You are getting innerHTML reference while initialisation and also during assigning.
counter.innerHTML = 1;
const checkbox = document.getElementById('cb_enabled'),
increment = document.getElementById('btn_increment'),
decrement = document.getElementById('btn_decrement');
counter = document.getElementById("js_counter");
checkbox.addEventListener("change", function(checkbox) {
if (this.checked === false) {
increment.disabled = true;
decrement.disabled = true;
} else {
increment.disabled = false;
decrement.disabled = false;
}
});
increment.onclick = () => {
counter.innerHTML = 1;
}
decrement.onclick = () => {
counter.innerHTML = 0;
}
<h1 id="js_counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>
<label for="cb_enabled">
Enable/Disable counter
<input id="cb_enabled" type="checkbox" checked />
</label>
Upvotes: 0
Reputation: 782181
counter
should just be the element, not its innerHTML
.
To increment it, get its contents, parse it to a number, add or subtract 1, then write that back to the element.
const checkbox = document.getElementById('cb_enabled'),
increment = document.getElementById('btn_increment'),
decrement = document.getElementById('btn_decrement'),
counter = document.getElementById('js-counter');
checkbox.addEventListener("change", function(checkbox) {
if (this.checked === false) {
increment.disabled = true;
decrement.disabled = true;
} else {
increment.disabled = false;
decrement.disabled = false;
}
});
function add_to_counter(increment) {
let cur_count = parseInt(counter.innerText);
let new_count = cur_count + increment;
counter.innerText = new_count;
}
increment.onclick = () => {
add_to_counter(1);
}
decrement.onclick = () => {
add_to_counter(-1);
}
<h1 id="js-counter"> 0 </h1>
<button id="btn_decrement" type="button"> Decrement </button>
<button id="btn_increment" type="button"> Increment </button>
<label for="cb_enabled">
Enable/Disable counter
<input id="cb_enabled" type="checkbox" checked />
</label>
Upvotes: 2