プレーンなjsのonclockで、ulリストのli要素のクリック時の挙動を制御したい

Question

前提・実現したいこと

wordpressで管理しているページで、Javascriptを用いて、ulリストのli要素にクリック時にclassをaddしたり、li要素の子要素のa要素からhrefを取得したりなどの処理を施したいです。
使用しているテーマが複雑で、headerやhooterがどこで管理されているか特定するのが困難なため、このページではjQueryが使えず、プレーンなjsで書いています。
また、テーマのカテゴリを取得するコードからhtml要素が出力されているため、li要素のタグないにonclick="function"などは追加できません。

一日試行錯誤しましたが、解決できなかったため、お力をお借りしたいです。
どうかよろしく願いいたします。

発生している問題・エラーメッセージ

findLi[i].onclick = click(findLi[i]);
→この部分がループされているようで、初回ページ読み込み時にalertが3回続けて出ます。

該当のソースコード

window.onload = function() {
    var findUl = document.getElementsByClassName('products');
    var findLi = findUl[0].children;
    for (var i = 0; i < findLi.length; i++){
      findLi[i].getElementsByTagName('a')[0].href = "javascript:void(0)";
      findLi[i].onclick = click(findLi[i]);
    }
}
var click = function(li) {
  alert(li);
}

<ul class="products">
  <li>
     <a href="javascript:void(0)">
       <img class="lazy lazy-loaded" src="">
       <h2 class="woocommerce-loop-category__title">
        hoge <mark class="count">(135)</mark>
       </h2>
     </a>
   </li>
   <li>
      <a href="javascript:void(0)">
        <img class="lazy lazy-loaded" src="">
        <h2 class="woocommerce-loop-category__title">
         hoge <mark class="count">(135)</mark>
        </h2>
      </a>
    </li>
    <li>
       <a href="javascript:void(0)">
         <img class="lazy lazy-loaded" src="">
         <h2 class="woocommerce-loop-category__title">
          hoge <mark class="count">(135)</mark>
         </h2>
       </a>
     </li>
</ul>

Comments

[退会済みユーザー]

「ulリストのli要素にクリック時にclassをaddしたり、li要素の子要素のa要素からhrefを取得したりなどの処理を施したい」要件を「・・・など」と書かれると、要件が曖昧で何をしたいのかわかりません。要件に関しては曖昧な表現をせずに、明確に記述してください。

[yasutomi]

onclockではなくonclick、hooterではなくfooterなので
基本的なところをちゃんと確認した上で
質問されたほうが良いかと。

[naoki_m]

Kousukeさん修正依頼ありがとうございます！
問題としては、処理がループされていてonclickが機能しないことなので、その内容は関係ありません。

[naoki_m]

yasutomiさん
訂正ありがとうございます！
タイポ確認できてなく、読みづらい文で申し訳ありません。
重要な箇所は理解できるのかと思いますが、いかがでしょうか？

Answer 1

ちょっと何をやりたいか絞り込めてないように見受けられますが

<script>
window.addEventListener('DOMContentLoaded', ()=>{
  var findUl = document.querySelector('.products');
  var findLi = findUl.querySelectorAll('li');
  [].forEach.call(findLi,x=>{
    [].forEach.call(x.querySelectorAll('a'),x=>{
      x.addEventListener('click',e=>{
        e.stopPropagation();
      });
    });
    x.addEventListener('click',e=>{
      alert(e.target);
    });
  });
});
</script>

<ul class="products">
  <li>
     <a href="javascript:void(0)">
       <img class="lazy lazy-loaded" src="">
       <h2 class="woocommerce-loop-category__title">
        hoge <mark class="count">(135)</mark>
       </h2>
     </a>
   </li>
   <li>
      <a href="javascript:void(0)">
        <img class="lazy lazy-loaded" src="">
        <h2 class="woocommerce-loop-category__title">
         hoge <mark class="count">(135)</mark>
        </h2>
      </a>
    </li>
    <li>
       <a href="javascript:void(0)">
         <img class="lazy lazy-loaded" src="">
         <h2 class="woocommerce-loop-category__title">
          hoge <mark class="count">(135)</mark>
         </h2>
       </a>
     </li>
</ul>