JavaScriptが画面サイズに基づくリンクを指していた場合の変更点

Question

私はBootstrap 4フレームワークを使用してモバイルサイトを作成しています。私は<a>タグがブラウザの画面サイズに基づいて指している場所を変更するJavaScript関数を作成しようとしています。以下は、ページのHTMLコードのほんのごく一部です：

：

<div class="col-md"> 
    <div id="accordion" class="form-group text-dark mt-3"> 
     <!-- Cold Card --> 
     <div class="card"> 
      <!-- Cold Temps --> 
      <!-- Temps include Make line temps, Refrigerator temps, 
       Freezer temps, and Beffet temps --> 
      <div class="card-header"> 
       <a class="card-link" 
        data-toggle="collapse" 
        data-parent="#accordion" 
        href="#cold" 
        id="coldlink"> 
        <h3>Cold Temps Management</h3> 
       </a> 
      </div> 

      <!-- Cold Card --> 
      <div class="collapse" id="cold"> 

私はいくつかの異なるJavaScriptの機能をしようとし、次のされている私が使用している機能の最新のセットです。

const mq = window.matchMedia("(min-width: 767px)"); 

if(mq.matches) { 
    document.getElementById("coldlink").href = "#cold"; 
} else { 
    document.getElementById("coldlink").href = "cold.php"; 
} 

私は多くの異なるサイト間で読んだものから、それは767pxよりも小さい場合には、画面サイズが767px以上、"cold.php"あるとき、このコードは"#cold"に要素「coldlink」のhref属性を変更する必要があります。 Howerver、このコードを（フルページで）実行し、開発ツールを使用してページを検査すると、「TypeError：document.getElementById（...）is null」というエラーメッセージが表示されます。

私は.getElementById(...)このエラーメッセージが表示されずに他のいくつかの関数でメソッドが使用されるため、この時点でどこが間違っていたのか分かりません。

ブートストラップを使用してhref属性を変更する方法があれば、私は上のhrefのさらに

Answer 1

代わりにこれを行う方法を発見していないとして、私はそれに打撃を与えるために喜ん以上になり、あなたのあなたは順番に、あなたは

const mq = window.matchMedia("(min-width: 767px)"); 

if (mq.matches) { 
    window.location.href = "#cold"; 
} else { 
    window.location.href = "cold.php"; 
} 

Answer 2

がウィンドウのonloadを追加行うことができ、あなたのonclickの機能でonclickイベント https://www.w3schools.com/jsref/event_onclick.asp

を行うことができますアンカー要素を取得してhrefを変更するよりも、ページ内のDOMを完全にロードできるようにするために、javascriptを使用してDOM操作を行いたい場合は、すべてが最初にロードされていることを確認することをお勧めします。

window.onload = function() { 
 
      const mq = window.matchMedia("(min-width: 400px)").matches 
 
      if (mq) { 
 
       console.log('More') 
 
       document.getElementById("coldlink").href = "#cold"; 
 
      } else { 
 
       console.log('Less') 
 
       document.getElementById("coldlink").href = "cold.php"; 
 
      } 
 
     }