为什么内部 html 不能与 Javascript 一起使用？

Question

我压力很大，因为我不明白为什么我的代码没有在 Javascript 中显示计算结果。它是另一种语言，但基本上我只想输入两个变量，如果它们介于值之间，它们应该显示文本。这是我的代码，我认为它看起来不错，但不知何故无法正常工作。

  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>

如果你能帮助我，我将不胜感激也许这是我犯的一个愚蠢的错误

Answer 1

您有一些格式问题：

您没有 ID 为 "calculate"
您不能将字符串 ( function("inwoners") ) 作为函数的第一个参数传递给事件处理程序，因为传递给它的第一个东西总是事件对象
在第 7 行，您有一个 "div" 变量尚未在任何地方定义
您在第 6 行的 if 语句在条件后缺少右括号并且有一个 ||后面没有任何东西
你在第 34 行有一个额外的括号
如前所述，您在第 35 行的 innerHTML 之前遗漏了一个点

Answer 2

您遇到了一些格式问题。您在第一个 if 语句中错过了 )，并且在那个 if 语句中有一个额外的 ||。

你也没有在那个按钮上 id 作为 calculate

我翻译了你的代码（因为我不知道它在做什么）。这样做之后，就不是很复杂了。

见下文，工作代码-

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

希望对您有所帮助！

为什么内部 html 不能与 Javascript 一起使用？

Why is inner html not working with Javascript?

javascript

innerhtml