Question

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

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

我的问题：我明白了＆＃34;未捕获的TypeError：无法读取属性＆＃39; setAttribute＆＃39; of null＆＃34;像疯了一样开火对于控制台中的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 !pathElement。{/ p>

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，它将退出该功能并停止执行。

我还将变量拉到函数顶部，原因有两个。

首先，为了便于阅读并为了避免潜在的错误而在顶部声明范围的所有变量，这是一个很好的惯例。

另一个原因，特别是对于这种情况，你可以尽早跳出来。如果我们不能用它做任何事情，就不需要做其他的数学运算。

未捕获的TypeError：无法读取属性＆＃39; setAttribute＆＃39;为null

1 个答案: