Javascript 未捕获类型错误：无法读取属性'；setAttribute'；空的

既然我是个傻瓜，还在学JS，请容忍我

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

我的问题是：我会 “未捕获的TypeError:无法读取null的属性'setAttribute'”疯狂地触发 对于

pathElementTwo.setAttribute（'d'，descripbearc（26,0，arcTwo））在控制台中，因为只有在用户登录时才需要加载特定arc的区域。这只会在登录前在控制台中疯狂地触发，而在登录后它会消失

我如何解决这个问题，使控制台不会在用户登录前疯狂地启动

非常感谢您的帮助。谢谢

JS

函数描述C（半径、起始角、终止角）{
//辅助函数，用于转换（startAngle，endAngle）圆弧
//将索引转换为笛卡尔坐标，用于
//SVG弧描述符。
函数极坐标（半径、角度）{
返回{
x：半径*数学cos（角度），
y：半径*数学sin（角度），
};
}
//为弧的起点和终点生成笛卡尔坐标。
var起点=极笛卡尔坐标（半径、端角）；
var end=极笛卡尔（半径，startAngle）；
//确定我们绘制的圆弧是否大于1/2圆。
var largeArcFlag=endAngle-startAngle=2*Math.PI）{arc=0；}
如果（arcTwo>=2*Math.PI）{arcTwo=0；}
//更新SVG arc描述符。
var-pathElement=document.getElementById（'arc-path'）；
var-pathementtwo=document.getElementById（'arc-path-two'）；
setAttribute（'d'，descripbearc（26,0，arc））；
setAttribute（'d'，descripbearc（26,0，arcTwo））；
}, 400 / 0)

HTML

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

使用代码的一个简单方法就是
返回
if
！路径元素

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
，它将退出函数并停止执行操作

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

首先，在顶部声明一个范围的所有变量是一种很好的惯例，这有助于可读性和避免潜在的错误

另一个原因，特别是在这种情况下，是为了让你能尽早跳出。如果我们不能用它做任何事情，就不需要做其他的计算。
基本上，如果你还没有准备好，你只需要添加一些东西来缩短构建

使用代码的一个简单方法就是
返回
if
！路径元素

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
，它将退出函数并停止执行操作

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

首先，在顶部声明一个范围的所有变量是一种很好的惯例，这有助于可读性和避免潜在的错误

另一个原因，特别是在这种情况下，是为了让你能尽早跳出。如果我们不能用它做任何事情，就不需要做其他的数学运算。
这个错误意味着
getElementById
没有返回对象。你能发布你的html吗？关于
setInterval
的第二个参数可能不应该是0的除法。请分享htmlPlease帖子，问问自己为什么
pathElementTwo
还不存在。你在等DOM准备好了吗？如果它是一个外部SVG，您是否在尝试访问其DOM之前等待它加载？@PaulLeBeau-LeBeau我需要pathElementTwo仅在用户登录后启动，而不是在登录前启动。那是我的问题。登录前，该区域位于隐藏的div中。我如何解决这个问题？这个错误意味着
getElementById
没有返回对象。你能发布你的html吗？关于
setInterval
的第二个参数可能不应该是0的除法。请分享htmlPlease帖子，问问自己为什么
pathElementTwo
还不存在。你在等DOM准备好了吗？如果它是一个外部SVG，您是否在尝试访问其DOM之前等待它加载？@PaulLeBeau-LeBeau我需要pathElementTwo仅在用户登录后启动，而不是在登录前启动。那是我的问题。登录前，该区域位于隐藏的div中。我怎样才能解决这个问题？谢谢！您的解决方案有效，但我需要“pathElement.setAttribute（'d'，descripbearc（26，0，arc））；”在登录之前运行。我怎样才能做到这一点呢？“pathElement.setAttribute（'d'，descripbearc（26，0，arc））；”是用户登录前需要运行的第一个svg量表。我现在如何让特定的arc在控制台中运行而不发疯？如果（pathElementTwo==null）解决了我的问题！谢谢废话。。我的窗口被缓存了，看起来好像没有工作：/谢谢！您的解决方案有效，但我需要“pathElement.setAttribute（'d'，descripbearc（26，0，arc））；”在登录之前运行。我怎样才能做到这一点呢？“pathElement.setAttribute（'d'，descripbearc（26，0，arc））；”是用户登录前需要运行的第一个svg量表。我现在如何让特定的arc在控制台中运行而不发疯？如果（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)