JavaScript变量无法显示求助：小麦数量初始值不展示

看起来你遇到的问题主要是几个细节错误导致的，咱们一步步拆解并修复：

1. DOM元素ID不匹配，导致初始赋值失败 #

你在JS里写了一行代码：

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

但你的HTML里根本没有ID为numWheat的元素，对应的小麦数量元素ID是wheatNum，而且这个numWheat变量其实是多余的（你实际用wheat统计小麦数量）。这行代码会抛出Cannot set property 'innerHTML' of null的错误，直接中断后续代码执行，所以小麦的初始值0根本没机会被渲染到页面上。

2. Math.Random()拼写错误 #

wheatHandler里的Math.Random()是错误写法，JavaScript里这个方法是小写r的Math.random()，大写的话会提示方法未定义，导致生长逻辑彻底失效。

3. 同步循环无法模拟生长效果 #

你用for循环直接累加wheat，这个循环会瞬间执行完，用户完全看不到小麦慢慢增加的过程，得用定时器来模拟真实的生长节奏。

4. 未触发小麦生长逻辑 #

addWheatFarm函数里的wheatHandler()被注释掉了，所以点击添加麦田后，根本不会启动小麦生长的逻辑。

修正后的完整代码 #

JavaScript代码 #

var wheatFields = 0; 
var wheat = 0; 

window.onload = function() {
  // 初始化页面显示，只保留有用的DOM赋值
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  document.getElementById("wheatNum").innerHTML = wheat;
};

function addWheatFarm() {
  wheatFields++;
  document.getElementById("wheatFarms").innerHTML = wheatFields;
  // 启动小麦生长逻辑
  startWheatGrowth();
}

// 重构生长函数，用定时器模拟逐步生长
function startWheatGrowth() {
  // 随机生成生长周期（10-60次）
  var lifespan = Math.floor(Math.random() * 50) + 10;
  var growthCount = 0;
  
  var growthInterval = setInterval(function() {
    wheat++;
    document.getElementById("wheatNum").innerHTML = wheat;
    growthCount++;
    
    // 达到生长周期后停止定时器
    if (growthCount >= lifespan) {
      clearInterval(growthInterval);
    }
  }, 100); // 每100毫秒长1个小麦，可根据需求调整速度
}

HTML代码 #

<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">
        <li id="fieldCounter">
          <p>Wheat Fields <var id="wheatFarms"></var></p>
        </li>
      </ul>
    </div>
    <br><br>
    <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>
        </li>
      </ul>
    </div>
  </div>
</div>

关键修改说明 #

• 删掉了无用的numWheat变量和对应的错误DOM赋值代码，确保页面初始渲染正常。
• 修正了Math.random()的拼写错误，让随机生长周期逻辑生效。
• 将同步循环改为setInterval定时器，模拟小麦逐步生长的效果，用户能直观看到数量递增的过程。
• 取消了addWheatFarm里生长函数的注释，点击按钮添加麦田后会自动启动小麦生长。

现在测试一下：页面加载后小麦数量会显示0，点击按钮添加麦田后，小麦会慢慢增加到随机的数量，麦田数量也会正常更新~

内容的提问来源于stack exchange，提问作者The TwistyTie