Incorporate a function for all the buttons with specific class using vanilla JS-CodePudding

I want to put the function in a loop to show hide all buttons. It works if I use it without a loop on a particular button, but I cannot incorporate it in a loop properly. It says: Uncaught TypeError: Cannot read properties of undefined (reading 'style')

//jshint esversion: 6

var dt = new Date();

document.getElementById("datetime").innerHTML = dt.toLocaleDateString('default', { day: 'numeric' , month: 'long', year:'numeric' });

var numberOfbuttons = document.querySelectorAll(".r").length;

console.log(numberOfbuttons);

for (i=0; i < numberOfbuttons; i  ) {

document.querySelectorAll(".r")[i].onmouseover = function () {
  mouseOver([i]);
};
document.querySelectorAll(".r")[i].onmouseout = function () {
  mouseOut([i]);
};
}

function mouseOut(key) {
  document.querySelectorAll(".r")[key].style.opacity = 0;
}

function mouseOver(key) {
  document.querySelectorAll(".r")[key].style.opacity = 1;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background: url(img/bg4.jpg);
  background-size: cover;
}

img {
  border-radius: 100%;
  width: 150px;
  height: 150px;
  box-shadow: 8px 8px 13px #222;
  border: solid 3px #606f46;
}

span {
  background: #beebb3;
  border-color: #606f46;
  border-radius: 22px 0 22px 0;
  padding: 2px;
  border-style: solid;
  margin-top: 5px;
  box-shadow: 4px 4px 13px #222;
  width: 145px;
  color: green;
}

h1 {
  /* width: 580px; */
  font-family: 'Sofia', cursive;
  font-size: 3.4rem;
  text-align: center;
  margin: 10px auto;
  padding-top: 15px;
  padding-bottom: 15px;
}

h2 {
    font-family: 'Sofia', cursive;
    font-size: 2rem;
}

#btn1 {
    opacity: 0;
}

#btn2 {
    opacity: 0;
}


.r {
  background-image: url('img/refresh2.png');
  background-size: contain;

}

.refresh {
  outline: none;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  position: absolute;
  right: 3px;
  top: 108px;

}


#no1 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
}

#no2 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 9px;
}

#no3 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 8px;
}

#no4 {
  display: flex;
  justify-content: center;
  width: 190px;
  line-height: 16px;
  margin: auto;
  margin-top: 9px;
}

.container1 {
  width: 580px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-weight: bold;
  font-size: 11px;
  text-align: center;
  margin: auto;
}

.container2 {
  width: 700px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: auto;
  font-weight: bold;
  font-size: 11px;
}

.container3 {
  width: 1100px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: auto;
  font-weight: bold;
  font-size: 11px;
}

.container4 {
  width: 1300px;
  font-family: verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  text-align: center;
  margin: auto;
  font-weight: bold;
  font-size: 11px;
}

.tree {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  position: relative;
}

.white_bg {
  background-color: white;
}

.container1_row4 {
  display: flex;
  justify-content: center;
  margin-left: 240px;
  position: relative;
  right: 10px;
}

.container2_row4 {
  display: flex;
  justify-content: center;
  margin-left: 35px;
  margin-right: 150px;
  position: relative;
  right: 25px;
}

.container3_row4 {
  display: flex;
  justify-content: center;
  margin-right: 240px;
}

.level1 {
  height: 3px;
  width: 110px;
  border-style: hidden solid solid solid;
  border-width: thick;
  margin-left: 230px;
}

.oblique1 {
  width: 88px;
  transform: rotate(-30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.oblique2 {
  width: 88px;
  transform: rotate(30deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.oblique_row {
  display: flex;
  margin-left: 200px;
  margin-top: 17px;
}

.line_container2 {
  display: flex;
}

.first_arrow_row2 {
  position: relative;
  right: 125px;
}

.second_arrow_row2 {
  position: relative;
  right: 150px;
}

.second_arrow_row2>.oblique_row>.oblique1 {
  border-style: hidden;
}

.line_container3 {
  display: flex;
}

.line2 {
  width: 45px;
  transform: rotate(90deg);
  border-width: thick;
  border-style: hidden hidden solid hidden;
}

.first_arrow_row3 {
  position: relative;
  right: 165px;
}

.second_arrow_row3 {
  position: relative;
  right: 295px;
}

.third_arrow_row3 {
  position: relative;
  right: 295px;
}

.third_arrow_row3>.oblique_row>.line2 {
  position: relative;
  left: 70px;
}

.second_arrow_row3>.oblique_row>.line2 {
  position: relative;
  left: 70px;
}

.first_arrow_row3>.oblique_row {
  position: relative;
  right: 25px
}

.first_arrow_row3>.level1 {
  position: relative;
  left: 60px
}

.first_arrow_row3>.oblique_row>.oblique1 {
  width: 155px;
  transform: rotate(344deg);
}

.first_arrow_row3>.oblique_row>.oblique2 {
  width: 155px;
  transform: rotate(16deg);
}

#datetime {
  text-align: center;
}

<!DOCTYPE html>
<html>

<head>
  <title>Family Tree</title>
  <link rel="shortcut icon" href="img/family-tree.png" type="image/x-icon">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Sofia&display=swap" rel="stylesheet">
</head>

<body>

  <div >
    <h1>_ _ _ Family tree _ _ _</h1>
    <div id="no1">
      <div >
        <img src="https://entertainment.time.com/wp-content/uploads/sites/3/2013/05/fictioninfluence_list_homersimpson.jpg">
        <button id="btn1" > </button>
        <span>
          Homer Simpson
        </span>
      </div>
      <div >
        <img  src="https://static.wikia.nocookie.net/theultimatesimpsons/images/0/0f/Marge-Simpson-icon.png/revision/latest?cb=20180210061653">
        <button id="btn2" ></button>
        <span>
          Marge Simpson
        </span>
      </div>
    </div>

    <div >
      <div ></div>
      <div >
        <div ></div>
        <div ></div>
      </div>
    </div>

  </div>

  <div >


    <div id="no2">
      <div >
        <img src="https://openpsychometrics.org/tests/characters/test-resources/pics/S/2.jpg">
        <button id="btn3" ></button>
        <span>
          Bart Simpson
        </span>
      </div>
      <div >
        <img src="https://mella187.github.io/Cartoon-Hero/img/lisa-avatar.jpg">
        <button id="btn4" ></button>
        <span>
          Lisa Simpson
        </span>
      </div>
      <div >
        <img src="https://i.pinimg.com/originals/e5/4a/bc/e54abc44b68d6b2770696b789b20dafa.png">
        <button id="btn5" ></button>
        <span>
          Abraham Simpson
        </span>
      </div>
      <div >
        <img  src="https://icons.iconarchive.com/icons/jonathan-rey/simpsons/256/Maggie-Simpson-icon.png">
        <button id="btn6" ></button>
        <span>
          Maggie Simpson
        </span>
      </div>

    </div>

    <div >

      <div >
        <div > </div>
        <div >
          <div ></div>
          <div ></div>
        </div>
      </div>
      <div >
        <div > </div>
        <div >
          <div ></div>
          <div ></div>
        </div>
      </div>


    </div>
  </div>


  <div >


    <div id="no3">
      <div >
        <img  src="https://cdn.quotesgram.com/img/7/98/1464708000-Ned_Flanders.png">
        <button id="btn7" ></button>
        <span>
          Ned Flanders
        </span>
      </div>
      <div >
        <img  src="https://i.pinimg.com/originals/b7/4f/ae/b74faea8de35d22b703b6ae32f891a92.png">
        <button id="btn8" ></button>
        <span>
          Elizabeth Hoover
        </span>
      </div>
      <div >
        <img  src="https://static.wikia.nocookie.net/p__/images/3/3a/Seymour_Skinner.png/revision/latest/top-crop/width/360/height/360?cb=20200804144332&path-prefix=protagonist">
        <button id="btn9" ></button>
        <span>
          Seymour Skinner
        </span>
      </div>
      <div >
        <img  src="https://www.personality-database.com/profile_images/20160.png">
        <button id="btn10" ></button>
        <span> Edna Krabappel
        </span>
      </div>


      <div >
        <img  src="https://static.wikia.nocookie.net/p__/images/b/b4/Barnild_Gumble.png/revision/latest/top-crop/width/360/height/360?cb=20160402113506&path-prefix=protagonist">
        <button id="btn11" ></button>
        <span>
          Barney Gumble
        </span>
      </div>
      <div >
        <img  src="https://static.wikia.nocookie.net/simpsons/images/d/d5/Patty_Bouvier1.png/revision/latest/top-crop/width/360/height/360?cb=20201222215313">
        <button id="btn12" ></button>
        <span>
          Selma Bouvier
        </span>
      </div>
    </div>

    <div >

      <div >
        <div > </div>
        <div >
          <div ></div>
          <div ></div>
          <div ></div>
        </div>
      </div>
      <div >
        <div > </div>
        <div >
          <div ></div>
        </div>
      </div>
      <div >
        <div > </div>
        <div >
          <div ></div>
        </div>
      </div>

    </div>

  </div>

  <div >


    <div id="no4">
      <div >
        <div >
          <img src="https://www.canncentral.com/wp-content/uploads/2019/09/Kent_Brockman-Cannabis-1.jpg">
          <button id="btn13" ></button>
          <span>
            Kent Brockman
          </span>
        </div>
        <div >
          <img src="https://untappd.akamaized.net/site/beer_logos_hd/beer-1158277_7220b_hd.jpeg">
          <button id="btn14" ></button>
          <span>
            Mayor Quimby
          </span>
        </div>
        <div >
          <img src="https://i.pinimg.com/474x/8e/a1/2b/8ea12bd79870a03994fbf65f63baaa92--school-pictures-sideshow.jpg">
          <button id="btn15" ></button>
          <span>
            Sideshow Bob
          </span>
        </div>
      </div>
      <div >
        <div >
          <img  src="https://static.wikia.nocookie.net/p__/images/8/81/Wiggum_with_coffee.png/revision/latest/top-crop/width/360/height/360?cb=20160322214733&path-prefix=protagonist">
          <button id="btn16" ></button>
          <span>
            Clancy Wiggum
          </span>
        </div>
      </div>
      <div >
        <div >
          <img src="https://www.kindpng.com/picc/m/394-3940977_los-simpson-nikki-mckenna-hd-png-download.png">
          <button id="btn17" ></button>
          <span>
            Nikki McKenna
          </span>
        </div>
        <div >
          <img src="https://topicimages.mrowl.com/large/owl/thesimpsons/characters/milhousevanhou_1.jpg">
          <button id="btn18" ></button>
          <span>
            Milhouse Van Houten
          </span>
        </div>

      </div>
    </div>
  </div>

  <div >
    <h2 id="datetime"></h2>
  </div>

<script src="index.js" charset="utf-8"></script>

</body>

</html>

CodePudding user response：

your calling it by mouseOut([i]); instead of mouseOut(i); (no need to wrap it as an array)

and the i changes in the loop each time, so at the end you have i == 18. and when the event callback is called the i is still 18. you can do something like document.querySelectorAll(".r")[i].onmouseover = mouseOver.bind(null, i);