Question 101596 in Elementor Question posted in
A comprehensive tutorial library can be found here.

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

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> ```
Tags:

2

Answers


  1. 0

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

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

    Login or Signup to reply.
  2. 0

    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";

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search