Javascript document.getElementById（"；elementId"；）.innerHTML=（）的倍数，导致第二个返回为null_Javascript

Javascript document.getElementById（"；elementId"；）.innerHTML=（）的倍数，导致第二个返回为null

javascript

Javascript document.getElementById（"；elementId"；）.innerHTML=（）的倍数，导致第二个返回为null,javascript,Javascript,首先，让我解释一下我想做什么：我想为一个视频游戏制作一个脚本，计算游戏中有多少钱，并创建一个元素来显示它。跟踪钱的部分很容易，但显然制作元素是我尝试过的最令人困惑的事情 chrome控制台的灯光截图：屏幕截图中的蓝色高亮线在执行两次后出现错误。我用红色框住了错误消息我将从我的脚本中提取一些代码，主要针对对于我需要帮助的问题非常重要的代码，而忽略我理解的代码还要注意的是，我对用Javascript生成图形非常陌生，所以如果我制作元素的方式很糟糕，那是因为我一直在尝试一些随机的东西，直到有什么

首先，让我解释一下我想做什么：我想为一个视频游戏制作一个脚本，计算游戏中有多少钱，并创建一个元素来显示它。跟踪钱的部分很容易，但显然制作元素是我尝试过的最令人困惑的事情

chrome控制台的灯光截图：屏幕截图中的蓝色高亮线在执行两次后出现错误。我用红色框住了错误消息

我将从我的脚本中提取一些代码，主要针对对于我需要帮助的问题非常重要的代码，而忽略我理解的代码

还要注意的是，我对用Javascript生成图形非常陌生，所以如果我制作元素的方式很糟糕，那是因为我一直在尝试一些随机的东西，直到有什么东西似乎起作用并坚持到底

// The elements that I created. Again i know next to nothing about elements, so the only thing that I 
// know will work is this catastrophe. 
var initialDiv = document.getElementById('onecup');

mainText = initialDiv.appendChild(document.createElement('mainText'));
mainText.style.position = 'absolute';
mainText.style.left="50%";
mainText.style.top="64px"
mainText.style.width = "290px";
mainText.style.height = "160px";
mainText.style.color = "white";
mainText.style.zindex = 1;
mainText.style.fontSize = "18px"

trackerBack = mainText.appendChild(document.createElement('trackerBack'));
trackerBack.style.position = 'absolute';
trackerBack.style.left="-200px"
trackerBack.style.top="0px"
trackerBack.style.width = "400px";
trackerBack.style.height = "160px";
trackerBack.style.backgroundColor = "black";
trackerBack.style.opacity = ".20"
trackerBack.style.zindex=1;

diffTotal = trackerBack.appendChild(document.createElement('diffTotal'));
diffTotal.id = "diffTotal"
diffTotal.style.position = 'absolute';
diffTotal.style.top="20%"
diffTotal.style.left="40%";
diffTotal.style.color = "rgba(255,255,255,255)";
diffTotal.style.opacity = "1"
diffTotal.style.zindex = 2;
diffTotal.style.fontSize = "30px"

diffFielded = diffTotal.appendChild(document.createElement('diffFielded'));
diffFielded.id = "diffFielded"
diffFielded.style.position = 'absolute';
diffFielded.style.top="-15px"
diffFielded.style.left="0px";
diffFielded.style.color = "rgba(255,255,255,255)";
diffFielded.style.opacity = "1"
diffFielded.style.zindex = 2;
diffFielded.style.fontSize = "20px"

// This function is used by a latter function to set the values of the text elements. I initially didn't 
// have this but thought adding it would help, but nothing changed.
// By the way, "toBna2" stands for to "big number abbreviation". It doesn't do anything major, besides
// shrink down numbers. Tried removing it, problem still persists.
conductValues = function(targetName, targetAssignment) {
    document.getElementById(targetName).innerHTML = toBna2(targetAssignment)
}

// This looping function controls the values that the elements display. However, I removed the code that 
// tells the function what values to make the elements, so if you want to test it, I guess just define 
// the 4 values as anything or make your own.
findValueDiff = setInterval(function() {

// If i make one of these lines a comment, it works, regardless of which one it is. But if i let both of 
// them run, the second document.getElementById("elementId") returns as null. Always the second one.
   conductValues("diffTotal", (aValP + aValU - bValP - bValU))
   conductValues("diffFielded", (aValU - bValU))
}

我甚至试过这样做：

conductValues = function(targetName, targetAssignment) {
  if (document.getElementById(targetName) != "undefined") {
    document.getElementById(targetName).innerHTML = toBna2(targetAssignment)
  }
}

但这样做只会使函数在第一次尝试时失败，因为总是第二个

文档。getElementById（“elementId”）

返回为null

我不完全确定我是否包含了足够的信息，但我不知道还需要添加什么，所以希望我添加了。但是如果你需要更多的信息，尽管问，我会尽快编辑这篇文章

感谢所有响应者，我希望你们在编码过程中保持健康

编辑1：我想如果我一次设置一个实体的变量，我会得到一些不同的结果，如下所示：

conductValues = function(targetName, targetAssignment) {
    document.getElementById(targetName).innerHTML = toBna2(targetAssignment)
}

loopMode=0

findValueDiff = setInterval(function() {
    if (loopMode == 0) {
      conductValues("diffTotal", (aValP + aValU - bValP - bValU))
      loopMode = 1
    } else {
      conductValues("diffFielded", (aValU - bValU))
      loopMode = 0 
    }
  }, 1000
);

但问题仍然没有改变。第二次尝试更新时，它失败了。

啊，我知道了：

diffTotal = trackerBack.appendChild(document.createElement('diffTotal'));
diffFielded = diffTotal.appendChild(document.createElement('diffFielded'));

conductValues("diffTotal", (aValP + aValU - bValP - bValU))
conductValues("diffFielded", (aValU - bValU))

conductValues = function(targetName, targetAssignment) {
    document.getElementById(targetName).innerHTML = toBna2(targetAssignment)
}

这些是导致错误的行。

diffFielded

是

diffTotal

的子项。在第一个

conductValues

调用中，替换

diffTotal

的innerHTML。执行此操作时，您正在删除

diffFielded

，因为它被新值替换，然后由于它不再存在而无法再找到它

我假设

diffFielded

实际上应该是

trackerBack

的另一个孩子，所以您应该：

diffFielded = trackerBack.appendChild(document.createElement('diffFielded'));

提示：将样式内容移动到css文件中。