TypeError: null is not an object (evaluating 'document.getElementById(actieveLijst).style'-CodePudding

I'm learning javascript and html and integrating it in my website. Locally, it is fine. Once i run it on the website (wordpress website with elementor plugin) it gives me the error in the title.

It is a calculator with 3 categories and 3 subcategories. A cascading dropdown which uses the display:none or display: block. A value is paired to each selection.

Sorry for pasting all of the code below.Not sure what is relevant for you guys to understand

<!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> ```

CodePudding user response：

Your HTML code doesn't seem to have any element with id="actieveLijst"

Which then causes document.getElementById(actieveLijst) to evaluate to null.

CodePudding user response：

So getElementById returns either Element or null and you have to check for those eventualities to satisfy Typescript, i.e. add an if statement. You could also add ? in the chain operation: document.getElementById(actieveLijst)?.style.display = "block";