Verwenden von JavaScript zu ändern, war ein Link auf basierend auf der Bildschirmgröße

Question

Ich erstelle eine Mobile-erste Website mit dem Bootstrap 4-Framework. Ich versuche, eine JavaScript-Funktion zu erstellen, die sich ändern wird, wo ein <a>-Tag basierend auf der Bildschirmgröße des Browsers verweist. Das Folgende ist nur ein sehr kleiner Teil des HTML-Codes für die Seite:

<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"> 

ich verschiedene JavaScript-Funktionen versucht haben, und die folgende ist die jüngste Reihe von Funktionen, die ich verwendet habe:

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

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

von dem, was ich über viele verschiedene Websites gelesen habe, soll dieser Code die href Attribute des Elements ändern „coldlink“ zu "#cold" wenn die Bildschirmgröße 767px oder größer ist, und "cold.php", wenn sie kleiner als 767px ist. Wenn ich jedoch diesen Code (auf der ganzen Seite) ausführe und die Seite mit den Entwicklertools überprüfe, erhalte ich die Fehlermeldung "TypeError: document.getElementById (...) ist null"

Ich habe die verwendet .getElementById(...) Methode in mehreren anderen Funktionen ohne die gleiche Fehlermeldung erhalten, so dass ich nicht weiß, wo ich diesmal falsch ging.

, wenn es eine Möglichkeit ist, das href Attribut Bootstrap zu ändern, würde ich mehr als bereit sein, um sich einen Schuss, da ich nicht entdeckt habe, wie dies noch auf

Answer 1

Statt einem href zu tun, um Ihr Sie können https://www.w3schools.com/jsref/event_onclick.asp

in Ihrer Onclick-Funktion ein Onclick-Ereignis tun Sie

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

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

Answer 2

hinzufügen Fenster onload tun können, um Damit Ihre DOMs in der Seite vollständig geladen werden können, können Sie Ihr Ankerelement abrufen und dessen href ändern. Wenn Sie DOM-Manipulation mit JavaScript durchführen möchten, sollten Sie sicherstellen, dass alle DOMs zuerst geladen werden.

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"; 
 
      } 
 
     }