jQueryからjavascriptに書き換えたい

Question

jQueryにてodometerクラスから200px下にスクロールすると文字色が変わるscriptを書きました。

    $(function() {
    // 引き金となる要素を設定
    let triggerNode = $(".odometer ");
     // 画面スクロール毎に判定を行う
    $(window).scroll(function(){
        // 引き金となる要素の位置を取得
        let triggerNodePosition = $(triggerNode).offset().top;  
        // 現在のスクロール位置が引き金要素の位置より下にあれば‥
        if ($(window).scrollTop() > triggerNodePosition - 200) {
            // 動かすJSの指示(pタグの文字色変更)
      $("p").css("color","#ff4500");
        }
    });
}); 

これを以下の様にjavascriptに書き換えているのですが、うまく動作しません。

// 引き金となる要素を設定
let triggerNode = document.getElementsByClassName('.odometer');
// 画面スクロール毎に判定を行う
window.addEventListener('scroll', function(){
// 引き金となる要素の位置を取得
let triggerNodePosition = triggerNode.offset().top;  
// 現在のスクロール位置が引き金要素の位置より下にあれば‥
if (window.scrollTop() > triggerNodePosition - 200) {
   // 動かすJSの指示(pタグの文字色変更)
      odometer.("p").css("color","#ff4500");
        }
});
    

どこがおかしいのでしょうか？
アドバイスお願いします。

Comments

[int32_t]

ブラウザの開発者ツールのコンソールにエラーが出ていませんか。

[m.ts10806]

JSFは関係ないと思います。
https://teratail.com/tags/JavaServer%20Faces

[Fukusuke0604]

JSFは関係ないと思います。
失礼しました。タグ付けを誤っておりました。修正いたしました。

[yambejp]

「odometerクラスから200px下にスクロールすると」の意味がよくわかりません
odometerクラスの要素のtop位置がwindowに200ドット隠れたら？

Answer 1

Document.getElementsByClassName() の戻り値は Element ではないです。
Document.getElementsByClassName() - Web API | MDN

Element には offset というメソッドはないです。offsetTop というプロパティはあります。
メソッド | HTMLElement - Web API | MDN
HTMLElement.offsetTop - Web API | MDN
【 javascript / jQuery 】offsetTopとoffset().top - Qiita

Window に scrollTop というメソッドはないです。scrollTo というメソッドがあります。また、Element には同名のプロパティがあります。
Window - Web API | MDN
Element.scrollTop - Web API | MDN
window.scrollTo - Web API | MDN

ご提示のコードの範囲では、odometer という変数が未定義です。また、文法もおかしいです。

Comments

[Fukusuke0604]

それぞれのコードのご指摘ありがとうございます。
jQueryとjavascriptのメソッドの違い、.getElementsByClassName() で取得するとエラーになっていた原因など理解できました。

Answer 2

仕様があいまいなので適当に

<style>
.odometer{
height:200%;
  background-Color:yellow;
}
p{
position:fixed;
top:0;
right:0;
height:100px;
width:100px;
  background-Color:gray;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const triggerNode = document.querySelector('.odometer');
  window.addEventListener('scroll',()=>{
    let triggerNodePosition = triggerNode.getBoundingClientRect().top;
    if(triggerNodePosition<-200){
      document.querySelector('p').style.color="#ffc0c0";
    }
  });
}); </script>
<div class="odometer">odometer</div>
<p>p</p>

Comments

[Fukusuke0604]

回答までいただきありがとうございます。

自分のコードと見極めて、なぜgetElementsByClassNameではなく、querySelectorなのか。
あとjavascriptには無いメソッドもつかっていましたね、、、、色々勉強になりました。