Can't make change image visibility ("hidden"/"visible") in the page with mouseover event listener in Javascript

Question

Good day everyone. I'm been trying without any success to add to my project mouseover event listener. I redone this thing over and over again, trying to simplify it, but still unable to do it. So, I came down to two objects (images) :

   <div id="box" class="main__box">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>
  <div id="boxm" class="main__box__moved">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>

This is a same image, but with different position I set in the scss. I tried to write a function, which would change visibly of two of them : box = visible, boxm = hidden and vice versa, if user hovering over labels :

<label for="question__1">How many team members can I invite? <span><img src="/images/icon-arrow-down.svg" alt="Arrow-Down"></span></label>

They are not parent and child elements, but in the same page. So, I tried simple function (less possibility that things will go wrong) :

var boxmoved = document.getElementById("boxm");
var boxmain = document.getElementById("box");
var labels = document.querySelectorAll('labels');

var func = function () {
  boxmoved.style.visibility = "visible";
  boxmain.style.visibility = "hidden";
}

var funks = function () {
  boxmoved.style.visibility = "hidden";
  boxmain.style.visibility = "visible";
}

labels.addEventListener("mouseenter", func);
labels.addEventListener("mouseleave", funks);

But the function doesn't working. I don't understand why and how to make it work.

I really hoping for your help guys and thank you in advance.

Answer 1

it works but im not sure be best practice.

window.addEventListener("DOMContentLoaded", function() {

  var boxmoved = document.getElementById("boxm");
  var boxmain = document.getElementById("box");
  boxmoved.style.visibility = "visible";
  boxmain.style.visibility = "hidden";

  var labels = document.getElementsByTagName("label");
  var labelsList = Array.prototype.slice.call(labels);
  
  labelsList.forEach(l=>{
    l.addEventListener("mouseenter", func);
    l.addEventListener("mouseleave", funks);
  })
    
})

  var func = function () {
    var boxmoved = document.getElementById("boxm");
    var boxmain = document.getElementById("box");
    boxmoved.style.visibility = "visible";
    boxmain.style.visibility = "hidden";
  }

  var funks = function () {
    var boxmoved = document.getElementById("boxm");
    var boxmain = document.getElementById("box");
    boxmoved.style.visibility = "hidden";
    boxmain.style.visibility = "visible";
  }

  <div id="box" class="main__box">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>
  <div id="boxm" class="main__box__moved">
    <img src="/images/illustration-box-desktop.svg" alt="What's in the box?" >
  </div>



<label for="question__1">How many team members can I invite? <span><img src="/images/icon-arrow-down.svg" alt="Arrow-Down"></span></label>