Var wont display

Question

So I'm bored so I decided to learn javascript an I came across this weird bug where one of my variables wont display even though it is the same code for both of them.

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>

I'm not quite sure where I am going wrong. I did the same thing for both of them and I don't know why it works for one and not the other. The number of wheat farms displays and will update when I click the button. but the number of wheat wont even show the 0 starting value.

Should be closed as typo: spelling of `numWheat` is different from `wheatNum`. Or if that is not what you intended, then you should have created an HTML element with that id. — trincot, May 19 '18 at 21:20
If people are curious, `` is a valid phrase tag. [From MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/var). — Drew Kennedy, May 19 '18 at 21:26

score 1 · Answer 1 · answered May 19 '18 at 21:19

You should check out the console, when it says on this line:

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

Throws this error because there's no element there with id="numWheat":

Uncaught TypeError: Cannot set property 'innerHTML' of null

So all the code after that got stopped working. Remove that line and everything works.

Also, Math.Random() is not right. It's Math.random().

Fully Corrected Code

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>

xD thanks that fixed it. Can't believe that I didn't see it. — The TwistyTie, May 19 '18 at 21:23

score 0 · Answer 2 · answered May 19 '18 at 21:42

Try this it will work 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 wont display

2 Answers2