Tengo 4 div (cuadro de color) y cada div representa un color diferente. Cuando un usuario se desplaza sobre uno de los cuadros de colores, el texto que se muestra ("Hola mundo") debe cambiar al color sobre el que se desplaza. Escribí el código para cada color, pero parece desgastado porque estoy copiando el código muchas veces para cada color. ¿Cómo puedo hacer este código más corto y más eficiente?
document.addEventListener('DOMContentLoaded', function() { const textToChange = document.getElementById('change_heading'); const brownColor = document.querySelector('.brown'); const greenColor = document.querySelector('.green'); const blueColor = document.querySelector('.blue'); brownColor.addEventListener('mouseover', function() { textToChange.classList.add('brown'); }); brownColor.addEventListener('mouseout', function() { textToChange.classList.remove('brown'); }); greenColor.addEventListener('mouseover', function() { textToChange.classList.add('green'); }); greenColor.addEventListener('mouseout', function() { textToChange.classList.remove('green'); }); blueColor.addEventListener('mouseover', function() { textToChange.classList.add('blue'); }); blueColor.addEventListener('mouseout', function() { textToChange.classList.remove('blue'); }); }); div { width: 50px; height: 50px; display: inline-block; } .brown { background-color: brown; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } <h1 id="change_heading">Hello World</h1> SELECTED COLOR <span class="selected">None!</span> <section> <div class="brown"></div> <div class="green"></div> <div class="blue"></div> <div class="yellow"></div> </section>Podrías acortar tu código de esta manera:
document.addEventListener('DOMContentLoaded', function() { const textToChange = document.getElementById('change_heading'); const corloredDivs = document.querySelectorAll('section div'); corloredDivs.forEach(d=>{ d.addEventListener('mouseover', function() { textToChange.classList.add(d.classList[0]); }); d.addEventListener('mouseout', function() { textToChange.classList.remove(d.classList[0]); }); }); }); div { width: 50px; height: 50px; display: inline-block; } .brown { background-color: brown; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } <h1 id="change_heading">Hello World</h1> SELECTED COLOR <span class="selected">None!</span> <section> <div class="brown"></div> <div class="green"></div> <div class="blue"></div> <div class="yellow"></div> </section>El código anterior es absolutamente mejor. Así es como lo he abreviado.
document.addEventListener('DOMContentLoaded', function () { const textToChange=document.getElementById('change_heading'); let allDivs = document.getElementsByClassName('a'); for (const div in allDivs) { let currentClassName = allDivs[div].className.split(" ")[1]; allDivs[div].addEventListener('mouseover', function(){ textToChange.classList.add(currentClassName); }); allDivs[div].addEventListener('mouseout', function(){ textToChange.classList.remove(currentClassName); }); } }); div { width: 50px; height: 50px; display: inline-block; } .brown { background-color: brown; } .green { background-color: green; } .blue { background-color: blue; } .yellow { background-color: yellow; } <body> <h1 id="change_heading">Hello World</h1> SELECTED COLOR <span class="selected">None!</span> <section> <div class="a brown"></div> <div class="a green"></div> <div class="a blue"></div> <div class="a yellow"></div> </section> <script src="script.js"></script>