未知の型エラー：ヌルのプロパティ 'setAttribute'を読み取ることができません

Question

まだJSを学んでいます。

私は現在動作している2つの円形SVGゲージを備えたWebアプリケーションを持っており、ユーザがログインする前にこの問題を受け取ります。

私の問題：私は 「捕捉されない例外TypeErrorを：プロパティを読み取ることができません 『のsetAttribute』ヌルの」取得ユーザーがログインしたときに、特定のアークだけロードする必要がある区域ので、コンソールにpathElementTwo.setAttribute('d', describeArc(26, 0, arcTwo));のために狂った のようにオフ発射これだけ。ログインする前にコンソールで狂ったように発火し、ログイン後に消えます。

ユーザーがログインする前にコンソールが狂ったように発火しないように、この問題を解決するにはどうすればよいですか？

喜んで助けてください。ありがとう！

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

は基本的に、あなたはちょうどあなたがそれのために準備ができていない場合は、短絡にビルドを何かを追加する必要があります。

コードを使用する簡単な方法は、!pathElementの場合はreturnになります。 pathElementまたはpathElementTwoがnullある場合

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) 

今、それだけで、関数の外に戻って物事をやって停止されます。

私はまた、関数の先頭まで変数を2つの理由で引き出しました。

まず、スコープのすべての変数を一番上に宣言し、読みやすくし、潜在的なエラーを避けるのがよいでしょう。

他の理由は、特にこの場合はできるだけ早く飛び降りることができるからです。他の数学をする必要はありません。私たちはそれで何かできるようにするつもりはありません。