javascript two events one function

Question

How can I listen for click and mouseover events when one of events are detected run a function?

//show image by color
function showImage(imgPath, imgText, mainImgId, element) {
  let thumb = document.getElementsByClassName("colors-li");
  for (let i = 0; i < thumb.length; i++) {
    thumb[i].classList.remove("active");
  }
  element.classList.add("active");

  let curImage = document.getElementById(mainImgId);
  curImage.src = imgPath;
  curImage.alt = imgText;
  curImage.title = imgText;
}

<div class="d-flex flex-row justify-content-center ">
  <a class="product-img" href="#"><img src="img/products/product.jpg" id="3" alt=""></a>

  <div class="color-slider ms-auto d-flex flex-column justify-content-center ">
    <div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
    <div class="swiper-container color-slides">
      <ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-gift.jpg','gift', 3, this);" onmouseover="showImage('img/products/product-gift.jpg','gift', 3, this);"><img src="img/products/product-thumb-gift.jpg" alt="gift"></li>
        <li class="colors-li active p-0 swiper-slide" onclick="showImage('img/products/product.jpg','product', 3, this);" onmouseover="showImage('img/products/product.jpg','product', 3, this);"><img src="img/products/product-thumb.jpg" alt="product"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-green.jpg','green', 3, this);" onmouseover="showImage('img/products/product-green.jpg','green', 3, this);"><img src="img/products/product-thumb-green.jpg" alt="green"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-yellow.jpg','yellow', 3, this);" onmouseover="showImage('img/products/product-yellow.jpg','yellow', 3, this);"><img src="img/products/product-thumb-yellow.jpg" alt="yellow"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-purple.jpg','purple', 3, this);" onmouseover="showImage('img/products/product-purple.jpg','purple', 3, this);"><img src="img/products/product-thumb-purple.jpg" alt="purple"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-orange.jpg','orange', 3, this);" onmouseover="showImage('img/products/product-orange.jpg','orange', 3, this);"><img src="img/products/product-thumb-orange.jpg" alt="orange"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-black.jpg','black', 3, this);" onmouseover="showImage('img/products/product-black.jpg','black', 3, this);"><img src="img/products/product-thumb-black.jpg" alt="black"></li>
        <li class="colors-li p-0 swiper-slide" onclick="showImage('img/products/product-red.jpg','red', 3, this);" onmouseover="showImage('img/products/product-red.jpg','red', 3, this);"><img src="img/products/product-thumb-red.jpg" alt="red"></li>
      </ul>
    </div>
    <div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
  </div>
</div>

Please help me reduce one of these:

    onclick="showImage('img/products/product-red.jpg','red', 3, this);"
    onmouseover="showImage('img/products/product-red.jpg','red', 3, this);"

Write the click/mouseover events listeners in Javascript, instead of inline HTML? — Jeremy Thille, May 25 '21 at 17:17
If this code works but only needs review and improvements, I suggest to post it on [CodeReview](https://codereview.stackexchange.com/), not Stackoverflow — Jeremy Thille, May 25 '21 at 17:19
I don't think you can reduce these to a single line of code, at least not without a library like jQuery. @JeremyThille's suggestion of writing it in JavaScript is a good one. — , May 25 '21 at 17:20
Why mainImgId is a number ? https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — Mister Jojo, May 25 '21 at 17:27

Mister Jojo · Accepted Answer · 2021-05-26T21:34:47.093

I will do that this way:
withUsing data attributes

const cColorLi_list = document.querySelectorAll('li.colors-li')
  ;
function showImage(elmLI)
  {
  elmLI.closest('ul')
    .querySelectorAll('li.colors-li') 
    .forEach(eLI => eLI.classList.toggle('active',(elmLI===eLI)))
  let curImage = document.getElementById(elmLI.dataset.ref)
  curImage.src = elmLI.dataset.img
  curImage.alt = curImage.title = elmLI.querySelector('img').alt
  }
cColorLi_list.forEach(cLi=>
  {
  cLi.onclick=()=> showImage(cLi)
  cLi.onmouseover=()=> showImage(cLi)
  })

<div class="d-flex flex-row justify-content-center ">
  <a class="product-img" href="#">  <img src="img/products/product.jpg" id="3" alt=""></a>

  <div class="color-slider ms-auto d-flex flex-column justify-content-center ">
    <div class="btn color-prev m-0 p-0"><i class="bi bi-chevron-up"></i></div>
    <div class="swiper-container color-slides">
      <ul class="colors d-flex flex-column m-0 p-0 swiper-wrapper">
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-gift.jpg"   data-ref="3" >
          <img src="img/products/product-thumb-gift.jpg" alt="gift">
        </li>
        <li class="colors-li active p-0 swiper-slide" data-img="img/products/product.jpg" data-ref="3" >
          <img src="img/products/product-thumb.jpg" alt="product" >
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-green.jpg"  data-ref="3" >
          <img src="img/products/product-thumb-green.jpg" alt="green">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-yellow.jpg" data-ref="3" >
          <img src="img/products/product-thumb-yellow.jpg" alt="yellow">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-purple.jpg" data-ref="3" >
          <img src="img/products/product-thumb-purple.jpg" alt="purple">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-orange.jpg" data-ref="3" >
          <img src="img/products/product-thumb-orange.jpg" alt="orange">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-black.jpg"  data-ref="3" >
          <img src="img/products/product-thumb-black.jpg" alt="black">
        </li>
        <li class="colors-li p-0 swiper-slide" data-img="img/products/product-red.jpg"    data-ref="3" >
          <img src="img/products/product-thumb-red.jpg" alt="red"  >
        </li>
      </ul>
    </div>
    <div class="btn color-next m-0 p-0"><i class="bi bi-chevron-down"></i></div>
  </div>
</div>

This code works well, I only have one problem, when one of the
@jkh yes this is done on this line : `cColorLi_list.forEach(eLI=>eLI.classList.toggle('active',(elmLI===eLI)))` what's the matter ? — Mister Jojo, May 26 '21 at 19:47
I use this code for products and I have many products. like [this](https://www.newchic.com/style/tshirt-t-000002865.html?mg_id=1&from=nav) — j kh, May 26 '21 at 20:15

javascript two events one function

1 Answers1