Uncaught TypeError: Kann die Eigenschaft 'setAttribute' von null nicht lesen

Question

Immer noch JS lernen, da ich ein Noob bin, also ertragen Sie mit mir.

Ich habe eine Web-App mit 2 kreisförmigen SVG Messgeräten, die zur Zeit funktionieren und ich bekomme dieses Problem, bevor sich der Benutzer anmeldet.

Mein Problem: Ich erhalte „Uncaught Typeerror: Kann Eigenschaft‚setAttribute‘von null nicht lesen“. Wie verrückt für pathElementTwo.setAttribute('d', describeArc(26, 0, arcTwo)); in Konsole abzufeuern, da der Bereich, in dem die spezifische Bogen braucht nur, wenn Benutzer zu laden melden Sie sich an diesem nur feuert vor dem Login wie verrückt in der Konsole ab, nach dem Login verschwindet es.

Wie kann ich dieses Problem beheben, sodass die Konsole nicht wie verrückt abfeuert, bevor sich Benutzer anmelden?

Jede Hilfe wird gerne angenommen. Vielen Dank!

JS

function describeArc(radius, startAngle, endAngle) { 
    // Helper function, used to convert the (startAngle, endAngle) arc 
    // dexcription into cartesian coordinates that are used for the 
    // SVG arc descriptor. 
    function polarToCartesian(radius, angle) { 
     return { 
      x: radius * Math.cos(angle), 
      y: radius * Math.sin(angle), 
     }; 
    } 

    // Generate cartesian coordinates for the start and end of the arc. 
    var start = polarToCartesian(radius, endAngle); 
    var end = polarToCartesian(radius, startAngle); 

    // Determine if we're drawing an arc that's larger than a 1/2 circle. 
    var largeArcFlag = endAngle - startAngle <= Math.PI ? 0 : 1; 

    // Generate the SVG arc descriptor. 
    var d = [ 
     'M', start.x, start.y, 
     'A', radius, radius, 1, largeArcFlag, 0, end.x, end.y 
    ].join(' ');  

    return d; 
} 

var arc = 0; 
var arcTwo = 0; 

setInterval(function() { 
    // Update the ticker progress. 
    arc += Math.PI/1000; 
    arcTwo += Math.PI/1000; 

    if (arc >= 2 * Math.PI) { arc = 0; } 
    if (arcTwo >= 2 * Math.PI) { arcTwo = 0; } 


    // Update the SVG arc descriptor. 
    var pathElement = document.getElementById('arc-path'); 
    var pathElementTwo = document.getElementById('arc-path-two'); 

    pathElement.setAttribute('d', describeArc(26, 0, arc)); 
    pathElementTwo.setAttribute('d', describeArc(26, 0, arcTwo)); 

    }, 400/0) 

HTML

<div class="ticker-body"> 
       <svg viewBox="19, -19 65 35" class="gauge-background" 
fill="none"> 
        <circle r="10"/> 
       </svg> 

       <svg viewBox="-39, -39 700 75" class="gauge" fill="none"> 
        <path id="arc-path" transform="rotate(-90)" stroke- 
linecap="circle" /> 
       </svg> 
       </div> 
       <div class="overlay-collect"></div> 
       <div class="hot-offer-btn"></div> 

<div class="ticker-body-two"> 
         <svg viewBox="4, -19 65 35" class="gauge-background- 
two" fill="none"> 
          <circle r="10"/> 
         </svg> 

         <svg viewBox="-51, -34 450 75" class="gauge-two" 
fill="none"> 
          <path id="arc-path-two" transform="rotate(-90)" 
stroke-linecap="circle" /> 
         </svg> 
         </div> 

Answer 1

Grundsätzlich müssen Sie nur etwas kurzzuschließen den Build hinzufügen, wenn Sie noch nicht bereit sind.

Ein einfacher Weg mit dem Code, den Sie haben, wäre nur return wenn !pathElement.

setInterval(function() { 
    // Update the SVG arc descriptor. 
    var pathElement = document.getElementById('arc-path'); 
    var pathElementTwo = document.getElementById('arc-path-two'); 

    if (!pathElement || !pathElementTwo) { 
    return; // don't do the rest 
    } 

    // Update the ticker progress. 
    arc += Math.PI/1000; 
    arcTwo += Math.PI/1000; 

    if (arc >= 2 * Math.PI) { arc = 0; } 
    if (arcTwo >= 2 * Math.PI) { arcTwo = 0; } 

    pathElement.setAttribute('d', describeArc(26, 0, arc)); 
    pathElementTwo.setAttribute('d', describeArc(26, 0, arcTwo)); 
}, 400/0) 

Nun, wenn pathElement oder pathElementTwonull sind, wird es zurückkehrt nur die Funktion aus und Dinge zu tun, stoppen.

Ich zog auch die Variablen aus zwei Gründen an den Anfang der Funktion.

Erstens ist es nur eine gute Konvention, alle Variablen für einen Bereich oben zu deklarieren, um die Lesbarkeit zu verbessern und mögliche Fehler zu vermeiden.

Der andere Grund, für diesen Fall insbesondere, ist so, dass Sie so früh wie möglich herausspringen können. Keine Notwendigkeit, die andere Mathematik zu tun, wenn wir nichts damit machen können.