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

You don't appear to have an element with the id calculate and you've failed to use the Stackoverflow code formatting tools (as well as the snippet feature which could provide a live demo of the problem). — Quentin
– Quentin, Commented Mar 6, 2015 at 23:53
ehe I'm sorry I'm very stupid and a beginner in this so what should I do — azaela
– azaela, Commented Mar 6, 2015 at 23:56
it's not the only error, you can't use string inside argument declaration. function("inwoners") is not valid, it should be function() — progysm
– progysm, Commented Mar 7, 2015 at 0:09
also your button should be <input id="calculate" type="button" value="Bereken!" /> — progysm
– progysm, Commented Mar 7, 2015 at 0:10

firefoxuser_1 · Accepted Answer · 2015-03-07 00:13:25Z

0

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

answered Mar 7, 2015 at 0:13

firefoxuser_1

1,84914 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Aswin Ramakrishnan · Accepted Answer · 2015-03-07 00:33:09Z

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!

You're the best of the best let me love you even though this site says I can't thank people you're saving my life

Collectives™ on Stack Overflow

Why is inner html not working with Javascript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related