Quiero hacer clic en el div y cambiar su fondo para seleccionar el valor. Cuando hago clic en otro div y selecciono el valor, el fondo cambia al anterior, no sé por qué se afectan entre sí.
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>Se afectan entre sí porque agrega un nuevo controlador de eventos para la selección cada vez que llama a changeColor habiendo capturado la variable div para cada invocación.
Asegúrese de agregar controladores de eventos solo una vez:
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>