I have 4 div (colored box) and each div represent a different color.
When a user hovers over one of the colored boxes the text to display ("Hello world") should change to the color that is being hovered over.
I wrote the code for each color, but it seems worng because I'm copying the code many times for each color. How can I make this code shorter and more efficient?
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>You could shorten your code this way:
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>The above code is absolutely better. This is how I have shortened it.
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>