I want to click on the div and change its background for select value. When I click on another div and select the value the background changes to the previous one, I don't know why they affect each other.
const divs = document.querySelectorAll('div');
const select = document.querySelector('select');
function changeColor(div, select) {
select.classList.remove('hidden');
select.addEventListener('change', (e) => {
div.style.backgroundColor = `${select.value}`;
select.classList.add('hidden');
e.stopPropagation();
});
}
divs.forEach(div => {
div.addEventListener('click', (e) => {
changeColor(div, select);
e.stopPropagation();
});
});* {
box-sizing: border-box;
}
section {
width: 100%;
padding: 100px;
}
.three {
background-color: rgb(84, 84, 177);
margin: 10px;
}
.two {
margin: 10px;
background-color: green
}
.one {
background-color: lightblue;
}
select.hidden {
display: none;
}<section class="one">
<div class="two">Two</div>
<div class="three">Three</div>
<select class="hidden">
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
</section>They affect each other because you add a new event handler for the select each time you call changeColor having captured the div variable for each invocation.
Make sure you only add event handlers once:
const divs = document.querySelectorAll('div');
const select = document.querySelector('select');
let selectedDiv = null;
divs.forEach(div => {
div.addEventListener('click', (e) => {
select.classList.remove('hidden');
selectedDiv = div;
e.stopPropagation();
});
});
select.addEventListener('change', (e) => {
selectedDiv.style.backgroundColor = `${select.value}`;
select.classList.add('hidden');
e.stopPropagation();
});* {
box-sizing: border-box;
}
section {
width: 100%;
padding: 100px;
}
.three {
background-color: rgb(84, 84, 177);
margin: 10px;
}
.two {
margin: 10px;
background-color: green
}
.one {
background-color: lightblue;
}
select.hidden {
display: none;
}<section class="one">
<div class="two">Two</div>
<div class="three">Three</div>
<select class="hidden">
<option value="red">red</option>
<option value="yellow">yellow</option>
</select>
</section>