javascript - 未捕获的类型错误 : Cannot read property 'setAttribute' of null

Question

仍在学习 JS，因为我是菜鸟，所以请耐心等待。

我有一个带有 2 个圆形 SVG 仪表的 Web 应用程序，目前可以正常工作，但在用户登录之前我收到了此问题。

我的问题:我明白了 “未捕获的类型错误:无法读取 null 的属性‘setAttribute’”疯狂地触发 for 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

基本上，如果您还没有准备好，您只需要添加一些东西来短路构建。

使用您拥有的代码的一种简单方法是仅 return if !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)

现在，如果 pathElement 或 pathElementTwo 为 null，它就会从函数中返回并停止执行操作。

出于两个原因，我还将变量拉到了函数的顶部。

首先，在顶部声明作用域的所有变量是一个很好的约定，以提高可读性并帮助避免潜在的错误。

另一个原因，特别是对于这种情况，是为了让你可以尽早跳出。如果我们无法用它做任何事情，则无需进行其他数学计算。