Question

我查看了其他stackoverflow问题和其他网站的答案。他们有帮助，但仍然无法正常工作，我也不知道为什么。请告诉我我做错了。谢谢！

我正在做：

在window.onload函数中定义全局变量并运行函数
在HTML的主要部分之后添加了Javascript
对变量名进行拼写检查

window.onload = function() {
  window.level = 0;
  window.xp = 0;
  window.totalMoney = 0;
  window.clicks = 0;
  window.money = 0;
  window.max = 0;
  Up();
}

function UpLevel() {
  xp = totalMoney + 5 * clicks;
  level = Math.floor(0.5 * Math.log2(xp / 10 + 2));
  max = Math.floor(Math.pow(1.5, level) * 100) - 100;
}

function Up() {
  UpLevel();
  document.getElementById("level").innerHTML = level;
  document.getElementById("xp").innerHTML = xp;
  document.getElementById("levelUp").innerHTML = Math.ceil(Math.pow(2, 2 * level + 2) * 10 - 20);
  document.getElementById("clicks").innerHTML = clicks;
  document.getElementById("money").innerHTML = money;
  document.getElementById("max").innerHTML = max;
}

#fontA {
  font-family: "Courier New";
  font-variant: small-caps;
  font-size: 50px;
}

#PosA {
  position: absolute;
  top: 20px;
  left: 20px;
}

#PosB {
  position: absolute;
  top: 20px;
  left: 400px;
}

 <div id="fontA">
    <div id="PosA">
      Level: <label id="level" />
      <br/> XP: <label id="xp" /> / <label id="levelUp" />
      <br/>
      <br/> Clicks: <label id="clicks" />
    </div>
    <div id="PosB">
      $ <label id="money" />
      <br/> / <label id="max" />
    </div>
  </div>

Answer 1

<label>是一个配对标签。您必须同时写上开始和结束标签（<label id="something"></label>）：

<div id="PosA">
  Level: <label id="level"></label>
  <br> XP: <label id="xp"></label> / <label id="levelUp"></label>
  <br>
  <br> Clicks: <label id="clicks"></label>
</div>
<div id="PosB">
  $ <label id="money"></label>
  <br> / <label id="max"></label>
</div>

您现在编写它的方式在HTML中是无效的（嗯，不是真的无效，但是会发生奇怪的事情）。它将在XHTML中有效，但这是一项过时的技术，建议您不要使用它。

Answer 2

问题在于，标识为“ level”的标签元素包含标识为“ xp”，“ levelUp”和“ clicks”的元素

//document.getElementById("level")
"
        <br>
        XP: <label id=\"xp\"> / <label id=\"levelUp\">
        <br>
        <br>
        Clicks: <label id=\"clicks\">
    </label></label></label>"

将其替换为innerHTHML后，将找不到ID为“ xp”的元素，并且document.getElementById（“ xp”）返回null。

如果使用结束标签元素定义html，它将起作用：

<div id="PosA">
    Level: <label id="level"> </label>
    <br/>
    XP: <label id="xp"> </label> / <label id="levelUp"></label> 
    <br/>
    <br/>
    Clicks: <label id="clicks"> </label>
</div>

<div id="PosB">
    $ <label id="money"> </label>
    <br/>
    / <label id="max"> </label>
</div>

无法将属性'innerHTML'设置为null-似乎没有任何解决办法

2 个答案: