Why is inner html not working with Javascript?

Question

I'm stressing out because I don't understand why my code doesn't show the result of the calculation in Javascript. It's in another language but basically I just want to type two variables and if they are inbetween the value they should be it should show a text. This is my code, I thought it looked pretty fine but it's not working somehow.

  document.getElementById('calculate').addEventListener('click', function("inwoners") {

    var bev = document.getElementById("bevdicht").value;
    var opp = document.getElementById("oppervlakte").value;

    if (bev < 1 || bev > 700 || opp < 0 || isNaN(bev) || isNaN(opp) || {
        div.innerHTML = "Ongeldige waarde ingevoerd!";
        return;
      }

      bev = parseInt(bev); opp = parseInt(opp);

      var inwoners = bev * opp;

      inwoners = Math.round(inwoners);

      if (inwoners > 582000 && inwoners < 585000) {
        var text = "Groningen";
      }
      if (inwoners > 643000 && inwoners < 646000) {
        var text = "Friesland";
      }
      if (inwoners > 48800 && inwoners < 49500) {
        var text = "licht overgewicht";
      }
      if (inwoners > 1130000 && inwoners < 1140000) {
        var text = "matig overgewicht";
      }
      /* if (bmi > 30 && bmi < 40) {
          var text = "ernstig overgewicht";
      }
      if (bmi > 40) {
          var text = "ziekelijk overgewicht"; */
    }

    div.getElementById('calc') innerHTML = "Het aantal inwoners in deze provincie zijn <b>" + inwoners + "</b><p></p> en het is de provincie <b>" + text + "</b>";
  }, false);

<form>
  De bevolkingsdichtheid is
  <input id="bevdicht" size="7" maxlength="5" type="text" placeholder="vul in" />
  <p></p>
  De oppervlakte van de provincie is
  <input id="oppervlakte" size="7" maxlength="9" type="text" placeholder="vul in" />vierkantemeter
  <p></p>
  <input onclick="inwoners()" type="button" value="Bereken!" />
</form>

<p>&nbsp</p>

<div id="calc">Het aantal inwoners in deze provincie zijn ..
  <p></p>en het is de provincie ...
</div>

I would be very grateful if you could help me maybe it's a stupid mistake I'm making

Answer 1

You had some formatting issues. You missed ) in the first if statement, and there was an extra || in that if statement.

You also didn't have id as calculate on that button

I translated your code (because I had no idea what it was doing). After doing so, it wasn't very complicated.

See below, the working code -

var calcResidents = function() {
  var populationDensity = document.getElementById("populationDensity").value;
  var provinceArea = document.getElementById("provinceArea").value;

  if (populationDensity < 1 || populationDensity > 700 || provinceArea < 0 || isNaN(populationDensity) || isNaN(provinceArea)) {
    document.getElementById('calc').innerHTML = "Invalid input value!";
    return;
  }

  var residents = parseInt(populationDensity) * parseInt(provinceArea);

  residents = Math.round(residents);

  if (residents > 582000 && residents < 585000) {
    var text = "Groningen";
  }

  if (residents > 643000 && residents < 646000) {
    var text = "Friesland";
  }

  if (residents > 48800 && residents < 49500) {
    var text = "licht overgewicht";
  }

  if (residents > 1130000 && residents < 1140000) {
    var text = "matig overgewicht";
  }

  document.getElementById('calc').innerHTML = "The population in this province <b>" + residents + "</b><p></p> and it is the province <b>" + text + "</b>";
};

<form>
  The population density is
  <input id="populationDensity" size="7" maxlength="5" type="text" placeholder="fill in" />
  <p></p>
  The area of the province is
  <input id="provinceArea" size="7" maxlength="9" type="text" placeholder="fill in" />square meters
  <p></p>
  <input id="calculate" onclick="calcResidents();" type="button" value="calculated!" />
</form>

<p>&nbsp</p>

<div id="calc">The population in this province ..
  <p></p>and it is the county ...
</div>

Try 500 for density and 1166 for area

Hope it helps!

Answer 2

You have some formatting issues:

• You don't have anything with an id of "calculate"
• You can't pass a string ( function("inwoners") ) as the first argument of the function for your event handler, as the first thing passed to it is always going to be an event object
• on line 7, you have a "div" variable you haven't defined anywhere
• your if statement on line 6 is missing a closing parentheses after the conditions and has an || that is not followed by anything
• you have an extra bracket on line 34
• as already mentioned, you left out a dot before innerHTML on line 35