Uncaught TypeError: Cannot read properties of undefined (reading 'add') [duplicate]

Question

Good evening, I keep getting the following errors:

• Uncaught TypeError: Cannot read properties of undefined (reading 'add')

• Uncaught TypeError: Cannot read properties of undefined (reading 'remove')

I want to add a class when I hover over an element. After many tries, I just have to ask because I can't figure it out.

What I want to achieve is that when someone hovers over a img, H3 or P all 3 elements get the "opacity" class. Is there a way to do this without getting a error?

My code: (Database is connected, just removed the login details.)

function opacityIn(elm) {
  var element = document.getElementsByName(elm.id);
  element.classList.add("opacity");



}

function opacityOut(elm) {
  var element = document.getElementsByName(elm.id);
  element.classList.remove("opacity");
}

.opacity
{
    opacity: 0.5;
    filter:alpha(opacity=50);
}

<div class="ProjectsGroup" style="">
    <?php
      $servername = "...";
      $username = "...";
      $password = "...";
      $dbname = "...";

      // Create connection
      $conn = new mysqli($servername, $username, $password, $dbname);
      // Check connection
      if ($conn->connect_error) {
          die("Connection failed: " . $conn->connect_error);
      }

      $sql = "SELECT id, img, title, beschrijving FROM portfolio";
      $result = $conn->query($sql);

      if ($result->num_rows > 0) {
          // output data of each row
          while($row = $result->fetch_assoc()) {
              $class = $i++ % 2 ? 'projRight' : 'projLeft';

              echo  '
                    <div class="' . $class . '">
                      <img  class=""  id="'. $row["id"] .'"   name="'. $row["id"] .'" onClick=""  onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)"      src="'. $row["img"] .'"                        alt="  '. $row["title"] .'"  >
                      <h3   class=""  id="'. $row["id"] .'"   name="'. $row["id"] .'" onClick=""  onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)"   >       '. $row["title"] .' </h3>
                      <p    class=""  id="'. $row["id"] .'"   name="'. $row["id"] .'" onClick=""  onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)"   >       '. $row["beschrijving"] .'  </p>
                    </div>
                    ';
          }
      } else {
          echo "0 results";
      }

      $conn->close();
    ?>
  </div>

Answer 1

By passing in this, you already have access to the element directly, you don't need to do a weird thing with document.getElementsByName (and either way, you should be using document.getElementById, ...ByName is for "p" giving all <p> tags)

function opacityIn(elm) {
  elm.classList.add("opacity");
}

function opacityOut(elm) {
  elm.classList.remove("opacity");
}

.opacity {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

<div class="' . $class . '">
  <img class="" id="'. $row[" id "] .'" name="'. $row[" id "] .'" onClick="" onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)" src="https://images.ctfassets.net/hrltx12pl8hq/4f6DfV5DbqaQUSw0uo0mWi/6fbcf889bdef65c5b92ffee86b13fc44/shutterstock_376532611.jpg?fit=fill&w=800&h=300" alt="  '. $row[" title "] .'">
  <h3 class="" id="'. $row[" id "] .'" name="'. $row[" id "] .'" onClick="" onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)">this is the h3</h3>
  <p class="" id="'. $row[" id "] .'" name="'. $row[" id "] .'" onClick="" onmouseover="opacityIn(this)" onmouseOut="opacityOut(this)">this is the paragraph</p>
</div>