TypeError：null 不是对象（评估 'document.getElementById(actieveLijst).style'）答案

【问题标题】：TypeError: null is not an object (evaluating 'document.getElementById(actieveLijst).style')TypeError：null 不是对象（评估 'document.getElementById(actieveLijst).style'）
【发布时间】：2021-11-24 22:15:15
【问题描述】：

我正在学习 javascript 和 html 并将其集成到我的网站中。在当地，还好。一旦我在网站上运行它（带有 elementor 插件的 wordpress 网站），它就会给我标题中的错误。

它是一个有 3 个类别和 3 个子类别的计算器。使用 display:none 或 display: 块的级联下拉列表。每个选择都有一个值。

很抱歉粘贴了下面的所有代码。不知道你们理解什么相关

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="UTF-8">
</head>
<body>
<h3>Stenencalculator voor snelbouw en lijmblokken</h3>
<div style="overflow-x:auto;">
  <table id='worksheet_table' class="table table-striped">
    <thead>
    <tr>
      <th>Kies een steen</th>
      <th>Kies de afmeting</th>
      <th>Aantal vierkante meter</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>
        <select onchange="typeGekozen()" id="steenSelector" name="steen">
          <option selected="selected">Kies een steen</option>
          <option value="snelbouw">Snelbouw</option>
          <option value="betonblok">Betonblok</option>
          <option value="lijmblok">Lijmblok</option>
          <option value="gevelsteen">Gevelsteen</option>
        </select>
      </td>
      <td>
        <select onchange="afmetingenGekozen()" id="snelbouwSelector" style="display: none" name="afmeting snelbouw">
          <option selected="selected">Kies een afmeting</option>
          <option value="33">29x9x9</option>
          <option value="33">29x14x9</option>
          <option value="33">29x19x9</option>
          <option value="22">29x9x14</option>
          <option value="22">29x14x14</option>
          <option value="22">29x19x14</option>
          <option value="16.7">29x9x19</option>
          <option value="16.7">29x14x19</option>
          <option value="16.7">29x19x19</option>
        </select>
        <select onchange="afmetingenGekozen()" id="betonblokSelector" style="display: none" name="afmeting betonblok">
          <option selected="selected">Kies een afmeting</option>
          <option value="12.5">39x14x19</option>
          <option value="12.5">39x19x19</option>
          <option value="12.5">39x29x19</option>
          <option value="22">29x9x14</option>
          <option value="22">29x14x14</option>
          <option value="16.7">29x14x19</option>
          <option value="16.7">29x19x19</option>
          <option value="12.5">39x9x19</option>
          <option value="12.5">39x14x19</option>
          <option value="12.5">39x19x19</option>
        </select>
        <select onchange="afmetingenGekozen()" id="lijmblokSelector" style="display: none" name="afmeting lijmblok">
          <option selected="selected">Kies een afmeting</option>
          <option value="12.5">39x14x19</option>
          <option value="12.5">39x19x19</option>
          <option value="12.5">39x29x19</option>
          <option value="22">29x9x14</option>
          <option value="22">29x14x14</option>
          <option value="16.7">29x14x19</option>
          <option value="16.7">29x19x19</option>
          <option value="12.5">39x9x19</option>
          <option value="12.5">39x14x19</option>
          <option value="12.5">39x19x19</option>
        </select>
        <select onchange="afmetingenGekozen()" id="gevelsteenSelector" style="display: none" name="afmeting gevelsteen">
          <option selected="selected">Kies een afmeting</option>
          <option value="83"> Traditioneel - M50 190x90x50</option>
          <option value="67"> Traditioneel - M65 190x90x65</option>
          <option value="72"> Traditioneel - WF 290x100x50</option>
          <option value="58"> Traditioneel - DF 210x100x65</option>
          <option value="83"> Traditioneel - HF 228x90x40</option>
          <option value="76"> Traditioneel - LF40 240x90x40</option>
          <option value="48"> Traditioneel - NF 249x115x71</option>
          <option value="60"> Traditioneel - XL45 290x65x45</option>
          <option value="91"> Dunbed - M50 190x90x50</option>
          <option value="76"> Dunbed - M65 190x90x65</option>
          <option value="83"> Dunbed - WF 290x100x50</option>
          <option value="65"> Dunbed - DF 210x100x65</option>
          <option value="93"> Dunbed - HF 228x90x40</option>
          <option value="88"> Dunbed - LF40 240x90x40</option>
          <option value="53"> Dunbed - NF 249x115x71</option>
          <option value="66"> Dunbed - XL45 290x65x45</option>
          <option value="95"> Verlijmd - M50 190x90x50</option>
          <option value="78"> Verlijmd - M65 190x90x65</option>
          <option value="86"> Verlijmd - WF 290x100x50</option>
          <option value="68"> Verlijmd - DF 210x100x65</option>
          <option value="98"> Verlijmd - HF 228x90x40</option>
          <option value="93"> Verlijmd - LF40 240x90x40</option>
          <option value="55"> Verlijmd - NF 249x115x71</option>
          <option value="69"> Dunbed - XL45 290x65x45</option>
        </select>
      </td>
      <td>
        <input type="number" min="0" name="oppervlakte" id="oppervlakte" class="form-control" onkeyup="berekenOppervlakte()" onchange="berekenOppervlakte()"/>
      </td>
    </tr>
    </tbody>
  </table>
</div>
<div style="overflow-x:auto;">
  <table id='resultStenen' class="table table-striped">
    <thead>
    <tr>
      <th>Aantal Stenen</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td name="Aantal Stenen" id="totaal"></td>
    </tr>
    </tbody>
  </table>
</div>
<script>
  function verbergAlleSteenMaten() {
    document.getElementById("snelbouwSelector").style.display = "none";
    document.getElementById("betonblokSelector").style.display = "none";
    document.getElementById("lijmblokSelector").style.display = "none";
    document.getElementById("gevelsteenSelector").style.display = "none";
  }

  var actieveLijst;
  function typeGekozen() {
    var steenType = document.getElementById("steenSelector").value;
    console.log("Soort", steenType);
    actieveLijst = steenType + "Selector";

    verbergAlleSteenMaten();
    document.getElementById(actieveLijst).style.display = "block";
  }

  var aantalStenenPerM2;
  function afmetingenGekozen() {
    var select = document.getElementById(actieveLijst);
    aantalStenenPerM2 = Number(select.options[select.selectedIndex].value);
    console.log("Stenen per m2", aantalStenenPerM2);
  }

  function berekenOppervlakte() {
    var oppervlakte = Number(document.getElementById('oppervlakte').value);
    console.log("Oppervlakte", oppervlakte);
    var totaalAantal = Number(aantalStenenPerM2) * oppervlakte;
    console.log("Totaal", totaalAantal);
    document.getElementById("totaal").innerHTML = totaalAantal + " stenen";
  };
</script>
</body>
</html> ```

【问题讨论】：

首先对您的代码进行故障排除。确保 actieveLijst 的值是您所期望的 - 错误基本上是说 document.getElementById(actieveLijst) 不存在
它肯定存在，我想它是在第 124 行创建的

标签： javascript html

【解决方案1】：

您的 HTML 代码似乎没有任何带有 id="actieveLijst" 的元素

这会导致 document.getElementById(actieveLijst) 评估为 null。

【讨论】：

它没有元素，它是一个变量：html var actieveLijst; function typeGekozen() { var steenType = document.getElementById("steenSelector").value; console.log("Soort", steenType); actieveLijst = steenType + "Selector";
document.getElementById 返回一个具有该 ID 的 HTML 元素。 actieveLijst 是一个 JavaScript 变量。

【解决方案2】：

所以 getElementById 返回 Element 或 null 并且您必须检查这些可能性以满足 Typescript，即添加一个 if 语句。您还可以在链操作中添加?： document.getElementById(actieveLijst)?.style.display = "block";

【讨论】：