I have three buttons. All i need is to add into array a corresponding value by the clicking on the button but if the value already exists in my array, I need to remove it from my array. My code works only if we use it twice (add and delete) the same button. But if we use it with differents - it brokes. Try it with example below. What is the reason to that behavior ?
Only pure JavaScript.
let buttons = document.querySelectorAll('.string')
let array = []
let value = ''
buttons.forEach(el => el.addEventListener('click', () => {
value = el.innerHTML
for (i = 0; array.length + 1; i++) {
if (array[i] === value) {
delete array[i]
array = array.filter(x => x) // clear empty values
console.log('deleted', array)
} else {
array.push(value)
console.log('added', array)
}
break
}
}))<div class="block">
<div class="string">some</div>
<div class="string">else</div>
<div class="string">other</div>
</div>It's not working as you expect because if the value doesn't match the first element in the array, it is pushed and the loop breaks. (Your loop always breaks after the first index anyway...)
Instead, you can just use Array.prototype.indexOf to get the index of the element if it exists in the array and then delete that index if it exists or push it if it doesn't.
You can also use Array.prototype.splice(index, deleteCount) to remove the index you don't want instead of doing delete and Array.prototype.filter.
let buttons = document.querySelectorAll('.string')
let array = []
let value = ''
buttons.forEach(el => el.addEventListener('click', () => {
value = el.innerHTML
let i = array.indexOf(value);
if(i > -1)
{
array.splice(i, 1);
console.log('deleted', array)
}
else
{
array.push(value)
console.log('added', array)
}
}))<div class="block">
<div class="string">some</div>
<div class="string">else</div>
<div class="string">other</div>
</div>If you had your heart set on using a for loop instead, I also fixed your original snippet to make it work using the loop you had:
let buttons = document.querySelectorAll('.string')
let array = []
let value = ''
buttons.forEach(el => el.addEventListener('click', () => {
value = el.innerHTML
if(array.length < 1)
{
array.push(value)
console.log("added", array)
return
}
for (i = 0; i < array.length; i++) {
if (array[i] === value) {
array.splice(i, 1)
console.log('deleted', array)
break
} else if (i == array.length - 1) {
array.push(value)
console.log('added', array)
break
}
}
}))<div class="block">
<div class="string">some</div>
<div class="string">else</div>
<div class="string">other</div>
</div>1) You can make it more efficient if you use Set here, because accessing the value is much better than accessing the value from array.
2) Better to use textContent instead of innerHTML.
let buttons = document.querySelectorAll('.string')
let array = [];
const set = new Set();
buttons.forEach(el => el.addEventListener('click', () => {
const text = el.textContent;
if (!set.has(text)) {
set.add(text);
array.push(text);
} else {
const index = array.indexOf(text);
array.splice(index, 1);
set.delete(text);
}
console.log(array);
}))<div class="block">
<div class="string">some</div>
<div class="string">else</div>
<div class="string">other</div>
</div>