Refactor my javascript code and I need a way how to prevent the text repeated when the mouse on?

Question

Hi guys I'm a beginner in JS could somebody help me please I have created an HTML page with 3 country's flags. When the user moves the mouse over one of the flags, display the name of the country in the text box. When they move the mouse away from the flag, clear the text box.

The problem is when I move the mouse on the flag many times the text repeated Also how to refactor my code it is so repeated I know I must use foreach but how? here is my code

 const photo = Array.from(document.querySelectorAll('.flag-img')); const oman = document.querySelector('.oman'); const algeria = document.querySelector('.algeria'); const uae = document.querySelector('.uae'); const div1 = document.createElement("div1"); const div2 = document.createElement("div2"); const div3 = document.createElement("div3"); function countryName() { const text1 = document.createTextNode("Oman"); div1.appendChild(text1); div1.className = "box"; oman.appendChild(div1); } function countryAlg() { const text2 = document.createTextNode("Algeria"); div2.appendChild(text2); div2.className = "box"; algeria.appendChild(div2); } function countryUae() { const text3 = document.createTextNode("UAE"); div3.appendChild(text3); div3.className = "box"; uae.appendChild(div3); } function fadeOut() { div1.parentNode.removeChild(div1); } function fadeOut2() { div2.parentNode.removeChild(div2); } function fadeOut3() { div3.parentNode.removeChild(div3); } oman.addEventListener('mouseenter', countryName); algeria.addEventListener('mouseenter', countryAlg); uae.addEventListener('mouseenter', countryUae); oman.addEventListener('mouseleave', fadeOut); algeria.addEventListener('mouseleave', fadeOut2); uae.addEventListener('mouseleave', fadeOut3); 

 * { margin: 0; box-sizing: border-box; } header { text-align: center; } #flag { margin-top: 50px; display: flex; justify-content: space-around; } .flag-img img { width: 200px; } .box { text-align: center; padding: 20px; border: 2px solid black; width: 100px; height: 100px; background-color: transparent; color: black; /*position: absolute; left: 50px; top: 50px;*/ } 

 <header> <h1>Countries Flags</h1> </header> <div id="flag"> <div class="flag-img oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img uae"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div> 

Answer 1

I tried to refractor this in your way :

Select all your elements

 var flags = document.getElementsByClassName("flag-img");

Init elements with function.

for (var i = 0; i < flags.length; i++) {
(function () {
console.log(flags[i]);
    var elem = flags[i];
    flags[i].addEventListener('mouseenter', function() {
    showCountry(elem)
  }, false);
  flags[i].addEventListener('mouseleave', function() {
    fadeOut(elem)
  }, false);    
  }());
}

Single function fadeout

 function fadeOut(a) {
    a.removeChild(a.lastChild);
}

Single function show.

 function showCountry(a) {  
   const text = document.createTextNode(a.className.split(" ")[1]);
         var div = document.createElement("div");
   div.appendChild(text);
   div.className = "box";
        a.appendChild(div);     
}

  console.clear(); var flags = document.getElementsByClassName("flag-img"); for (var i = 0; i < flags.length; i++) { (function () { var elem = flags[i]; flags[i].addEventListener('mouseenter', function() { showCountry(elem) }, false); flags[i].addEventListener('mouseleave', function() { fadeOut(elem) }, false); }()); } function fadeOut(a) { a.removeChild(a.lastChild); } function showCountry(a) { const text = document.createTextNode(a.className.split(" ")[1]); var div = document.createElement("div"); div.appendChild(text); div.className = "box"; a.appendChild(div); } 

 * { margin: 0; box-sizing: border-box; } header { text-align: center; } #flag { margin-top: 50px; display: flex; justify-content: space-around; } .flag-img img { width: 200px; } .box { text-align: center; padding: 20px; border: 2px solid black; width: 100px; height: 100px; background-color: transparent; color: black; /*position: absolute; left: 50px; top: 50px;*/ } 

 <header> <h1>Countries Flags</h1> </header> <div id="flag"> <div class="flag-img oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img uae"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div> 

Answer 2

instead of for loop I used forEach because i hate for loops and the code worked

var flags =  Array.from(document.getElementsByClassName("flag-img"));

   flags.forEach(function(value) {

      value.addEventListener('mouseenter', function() {
    showCountry(value)
  }, false);
       value.addEventListener('mouseleave', function() {
    fadeOut(value)
  }, false);    
    });

 function fadeOut(a) {
    a.removeChild(a.lastChild);
}


 function showCountry(a) {  
   const text = document.createTextNode(a.className.split(" ")[1]);
   var div = document.createElement("div");
   div.appendChild(text);
   div.className = "box";
        a.appendChild(div);     
}

Answer 3

I know you're trying to learn Javascript, but this is far easier (and better performance-wise) to achieve using CSS only:

 #flag { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } #flag img { max-width: 100%; } .flag-img::after { display: block; content: attr(data-country); opacity: 0; text-align: center; transition: opacity .4s ease-in-out; } .flag-img:hover::after { opacity: 1; } 

 <div id="flag"> <div class="flag-img" data-country="Oman"> <img src="https://motionarray.imgix.net/preview-339277phSMy7aPd_0007.jpg?w=750&q=60&fit=max&auto=format"> </div> <div class="flag-img" data-country="Algeria"> <img src="https://img.freepik.com/free-photo/flag-of-algeria_1401-52.jpg?size=338&ext=jpg"> </div> <div class="flag-img" data-country="United Arab Emirate"> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/cb/Flag_of_the_United_Arab_Emirates.svg/255px-Flag_of_the_United_Arab_Emirates.svg.png"> </div> </div>