Question

所以我很无聊，所以我决定学习javascript，我遇到了这个奇怪的错误，其中一个变量不会显示，即使它们都是相同的代码。

var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  document.getElementById("numWheat").innerHTML = numWheat;
  document.getElementById("wheatNum").innerHTML = wheat;
};

function addWheatFarm() {
  wheatFields++;
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  //wheatHandler();
}

function wheatHandler() {
  var lifespan = Math.floor(Math.Random() * 50) + 10;
  for (var i = 0; i <= lifespan; i++) {
    wheat++;
    document.getElementById("wheatNum").innerHTML = wheat;
  }
}

<div data-role="page" id="start">

  <div class="header">
    <h1>Farming Game</h1>
  </div>
  <div data-role="main" class="ui-content">
    <button id="wheatButton" onclick="addWheatFarm()">
                  Add a wheat farm.
              </button>
    </br>
    <br>
    <div id="fieldContainer" class="containers">
      <ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
        <br>
        <li id="fieldCounter">
          <p>Wheat Fields
            <var id="wheatFarms"></var>
          </p>
        </li>
      </ul>
      </br>
      </br>
    </div>
    <div id="inventoryContainer" class="containers">
      <ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
        <li id="wheatCounter">
          <p>Wheat <span id="wheatNum"></span>
            <!--<p id = "wheatNum"></p>-->
          </p>
        </li>
      </ul>
    </div>
  </div>
</div>

我不太确定我哪里出错了。我为他们两个做了同样的事情，我不知道为什么它适用于一个而不是另一个。当我点击按钮时，小麦农场的数量会显示并会更新。但是小麦的数量甚至不会显示0的起始值。

Answer 1

你应该检查控制台，当它在这一行上说：

document.getElementById("numWheat").innerHTML = numWheat;

引发此错误，因为id="numWheat"没有元素：

Uncaught TypeError: Cannot set property 'innerHTML' of null

所以那之后的所有代码都停止了工作。删除该行，一切正常。

另外，Math.Random()不对。它是Math.random()。

完全更正的代码

var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function(){
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  document.getElementById("wheatNum").innerHTML = wheat;
};
function addWheatFarm() {
  wheatFields++;
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  wheatHandler();
}

function wheatHandler(){
  var lifespan = Math.floor(Math.random() * 50) + 10;
  for (var i = 0; i <= lifespan; i++) {
    wheat++;
    document.getElementById("wheatNum").innerHTML = wheat;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="stylesheet.css">
    <script type="text/javascript" src="Scripts.js"></script>
  </head>
  <body>
    <div data-role = "page" id = "start">

      <div class = "header">
        <h1>Farming Game</h1>
      </div>
      <div data-role = "main" class = "ui-content">
        <button id = "wheatButton" onclick = "addWheatFarm()">
          Add a wheat farm.
        </button>
        </br>
      <br>
      <div id = "fieldContainer" class = "containers">
        <ul data-role = "listview" id = "farms" data-count-theme = "b" data-insert = "true">
          <br>
          <li id = "fieldCounter">
            <p>Wheat Fields
              <var id = "wheatFarms"></var>
            </p>
          </li>
        </ul>
        </br>
      </br>
    </div>
  <div id = "inventoryContainer" class = "containers">
    <ul data-role = "listview" id = "inventory" data-count-theme = "b" data-insert = "true">
      <li id = "wheatCounter">
        <p>Wheat <span id = "wheatNum"></span>
          <!-- <p id = "wheatNum"></p> -->
        </p>
      </li>
    </ul>
  </div>
  </body>
</html>

Answer 2

试试这个它会起作用 https://jsfiddle.net/debashishkumar/4mf1mvkc/

<div data-role="page" id="start">

  <div class="header">
    <h1>Farming Game</h1>
  </div>
  <div data-role="main" class="ui-content">
    <button id="wheatButton" onclick="addWheatFarm(12)">
                  Add a wheat farm.
              </button>
    <br>
    <div id="fieldContainer" class="containers">
      <ul data-role="listview" id="farms" data-count-theme="b" data-insert="true">
        <br>
        <li id="fieldCounter">
          <p>Wheat Fields
            <var id="wheatFarms"></var>
          </p>
        </li>
      </ul>

    <div id="inventoryContainer" class="containers">
      <ul data-role="listview" id="inventory" data-count-theme="b" data-insert="true">
        <li id="wheatCounter">
          <p>Wheat <span id="wheatNum"></span>
            <p id = "wheatNum"></p>
          </p>
        </li>
      </ul>
    </div>
  </div>
</div>
<script>
var wheatFields = 0;
var numWheat = 0;
var wheat = 0;
window.onload = function() {
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  document.getElementById("numWheat").innerHTML = numWheat;
  document.getElementById("wheatNum").innerHTML = wheat;
};

function addWheatFarm() {
  wheatFields++;
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  wheatHandler();
}

function wheatHandler() {
  var lifespan = Math.floor(Math.random() * 50) + 10;
  for (var i = 0; i <= lifespan; i++) {
    wheat++;
    document.getElementById("wheatNum").innerHTML = wheat;
  }
}
</script>

Var不会显示

2 个答案: