Question 201075 in Html Question posted in
Some basic documentation can be found here.

Html – JavaScript function with image, works on multiple elements?

How to do function would work on multiple elements?

let deomImage = document.getElementById("opacityLink");

deomImage.onmouseover = function() {
  deomImage.style = "opacity:0.9";
};

deomImage.onmouseout = function() {
  deomImage.style = "opacity:1";
};
<div class="news col-xxl-4 col-xl-4">
  <a href="/index.html" id="opacityLink" name="opacityLink">
    <div class="img-news">
      <img src="img_nature.jpg" alt="Nuotrauka">
    </div>
    <div class="info-news">
      <div class="date">
        2023.07.02
      </div>
      <div class="title-news">
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, soluta.</h2>
      </div>
      <div class="excerpt-news">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sed perspiciatis nihil voluptas qui quaerat tempore quibusdam inventore reiciendis, minima tempora quasi.</p>
      </div>
    </div>
  </a>
</div>

I tried with getElementsByClassName, with getElementById but not work. With ID works only 1 link, but I have 9 such links and I want the JavaScript code to work with all 9.

Tags:

2

Answers


  1. 0

    Use a class for each link, for example

    class="opacity-link"

    Then use querySelectorAll and loop through them.

    document.querySelectorAll('.opacity-link').forEach(link => {
     link.onmouseover = function() {
          link.style = "opacity:0.9";
     };
     link.onmouseout = function() {
          link.style = "opacity:1";
     };
});

    Though it would be much better to do it with just CSS instead.

    .opacity-link:hover {
      opacity: 0.9;
}
    Login or Signup to reply.
  2. 0

    A bit of a guess on markup but perhaps just add a class and then just CSS only for this?

    .linky-thing:hover {
  opacity: 0.9;
}
    <link href="
https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css
" rel="stylesheet">
<script src="
https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js
"></script>

<div class="news col-xxl-4 col-xl-4">
  <a class="linky-thing" href="/index.html" id="opacityLink" name="opacityLink">
    <div class="img-news">
      <img src="img_nature.jpg" alt="Nuotrauka">
    </div>
    <div class="info-news">
      <div class="date">
        2023.07.02
      </div>
      <div class="title-news">
        <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, soluta.</h2>
      </div>
      <div class="excerpt-news">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sed perspiciatis nihil voluptas qui quaerat tempore quibusdam inventore reiciendis, minima tempora quasi.</p>
      </div>
    </div>
  </a>
  <div class="news col-xxl-4 col-xl-4">
    <a class="linky-thing" href="/index.html" id="opacityLink2" name="opacityLink2">
      <div class="img-news">
        <img src="img_nature.jpg" alt="Nuotrauka">
      </div>
      <div class="info-news">
        <div class="date">
          2023.07.02
        </div>
        <div class="title-news">
          <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis, soluta.</h2>
        </div>
        <div class="excerpt-news">
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit sed perspiciatis nihil voluptas qui quaerat tempore quibusdam inventore reiciendis, minima tempora quasi.</p>
        </div>
      </div>
    </a>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search