Блог

Я изучаю javascript и html и интегрирую их в свой веб-сайт. На местном уровне это нормально. Как только я запускаю его на веб-сайте (веб-сайт wordpress с плагином elementor), он выдает мне ошибку в названии.

Это калькулятор с 3 категориями и 3 подкатегориями. Каскадное выпадающее меню, в котором используется отображение:нет или отображение: блок. Значение сопоставляется с каждым выбором.

Извините, что вставил весь приведенный ниже код.Не уверен, что вам, ребята, важно понять

 lt;!DOCTYPE htmlgt; lt;html lang="nl"gt; lt;headgt;  lt;meta charset="UTF-8"gt; lt;/headgt; lt;bodygt; lt;h3gt;Stenencalculator voor snelbouw en lijmblokkenlt;/h3gt; lt;div style="overflow-x:auto;"gt;  lt;table id='worksheet_table' class="table table-striped"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Kies een steenlt;/thgt;  lt;thgt;Kies de afmetinglt;/thgt;  lt;thgt;Aantal vierkante meterlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;tdgt;  lt;select onchange="typeGekozen()" id="steenSelector" name="steen"gt;  lt;option selected="selected"gt;Kies een steenlt;/optiongt;  lt;option value="snelbouw"gt;Snelbouwlt;/optiongt;  lt;option value="betonblok"gt;Betonbloklt;/optiongt;  lt;option value="lijmblok"gt;Lijmbloklt;/optiongt;  lt;option value="gevelsteen"gt;Gevelsteenlt;/optiongt;  lt;/selectgt;  lt;/tdgt;  lt;tdgt;  lt;select onchange="afmetingenGekozen()" id="snelbouwSelector" style="display: none" name="afmeting snelbouw"gt;  lt;option selected="selected"gt;Kies een afmetinglt;/optiongt;  lt;option value="33"gt;29x9x9lt;/optiongt;  lt;option value="33"gt;29x14x9lt;/optiongt;  lt;option value="33"gt;29x19x9lt;/optiongt;  lt;option value="22"gt;29x9x14lt;/optiongt;  lt;option value="22"gt;29x14x14lt;/optiongt;  lt;option value="22"gt;29x19x14lt;/optiongt;  lt;option value="16.7"gt;29x9x19lt;/optiongt;  lt;option value="16.7"gt;29x14x19lt;/optiongt;  lt;option value="16.7"gt;29x19x19lt;/optiongt;  lt;/selectgt;  lt;select onchange="afmetingenGekozen()" id="betonblokSelector" style="display: none" name="afmeting betonblok"gt;  lt;option selected="selected"gt;Kies een afmetinglt;/optiongt;  lt;option value="12.5"gt;39x14x19lt;/optiongt;  lt;option value="12.5"gt;39x19x19lt;/optiongt;  lt;option value="12.5"gt;39x29x19lt;/optiongt;  lt;option value="22"gt;29x9x14lt;/optiongt;  lt;option value="22"gt;29x14x14lt;/optiongt;  lt;option value="16.7"gt;29x14x19lt;/optiongt;  lt;option value="16.7"gt;29x19x19lt;/optiongt;  lt;option value="12.5"gt;39x9x19lt;/optiongt;  lt;option value="12.5"gt;39x14x19lt;/optiongt;  lt;option value="12.5"gt;39x19x19lt;/optiongt;  lt;/selectgt;  lt;select onchange="afmetingenGekozen()" id="lijmblokSelector" style="display: none" name="afmeting lijmblok"gt;  lt;option selected="selected"gt;Kies een afmetinglt;/optiongt;  lt;option value="12.5"gt;39x14x19lt;/optiongt;  lt;option value="12.5"gt;39x19x19lt;/optiongt;  lt;option value="12.5"gt;39x29x19lt;/optiongt;  lt;option value="22"gt;29x9x14lt;/optiongt;  lt;option value="22"gt;29x14x14lt;/optiongt;  lt;option value="16.7"gt;29x14x19lt;/optiongt;  lt;option value="16.7"gt;29x19x19lt;/optiongt;  lt;option value="12.5"gt;39x9x19lt;/optiongt;  lt;option value="12.5"gt;39x14x19lt;/optiongt;  lt;option value="12.5"gt;39x19x19lt;/optiongt;  lt;/selectgt;  lt;select onchange="afmetingenGekozen()" id="gevelsteenSelector" style="display: none" name="afmeting gevelsteen"gt;  lt;option selected="selected"gt;Kies een afmetinglt;/optiongt;  lt;option value="83"gt; Traditioneel - M50 190x90x50lt;/optiongt;  lt;option value="67"gt; Traditioneel - M65 190x90x65lt;/optiongt;  lt;option value="72"gt; Traditioneel - WF 290x100x50lt;/optiongt;  lt;option value="58"gt; Traditioneel - DF 210x100x65lt;/optiongt;  lt;option value="83"gt; Traditioneel - HF 228x90x40lt;/optiongt;  lt;option value="76"gt; Traditioneel - LF40 240x90x40lt;/optiongt;  lt;option value="48"gt; Traditioneel - NF 249x115x71lt;/optiongt;  lt;option value="60"gt; Traditioneel - XL45 290x65x45lt;/optiongt;  lt;option value="91"gt; Dunbed - M50 190x90x50lt;/optiongt;  lt;option value="76"gt; Dunbed - M65 190x90x65lt;/optiongt;  lt;option value="83"gt; Dunbed - WF 290x100x50lt;/optiongt;  lt;option value="65"gt; Dunbed - DF 210x100x65lt;/optiongt;  lt;option value="93"gt; Dunbed - HF 228x90x40lt;/optiongt;  lt;option value="88"gt; Dunbed - LF40 240x90x40lt;/optiongt;  lt;option value="53"gt; Dunbed - NF 249x115x71lt;/optiongt;  lt;option value="66"gt; Dunbed - XL45 290x65x45lt;/optiongt;  lt;option value="95"gt; Verlijmd - M50 190x90x50lt;/optiongt;  lt;option value="78"gt; Verlijmd - M65 190x90x65lt;/optiongt;  lt;option value="86"gt; Verlijmd - WF 290x100x50lt;/optiongt;  lt;option value="68"gt; Verlijmd - DF 210x100x65lt;/optiongt;  lt;option value="98"gt; Verlijmd - HF 228x90x40lt;/optiongt;  lt;option value="93"gt; Verlijmd - LF40 240x90x40lt;/optiongt;  lt;option value="55"gt; Verlijmd - NF 249x115x71lt;/optiongt;  lt;option value="69"gt; Dunbed - XL45 290x65x45lt;/optiongt;  lt;/selectgt;  lt;/tdgt;  lt;tdgt;  lt;input type="number" min="0" name="oppervlakte" id="oppervlakte" class="form-control" onkeyup="berekenOppervlakte()" onchange="berekenOppervlakte()"/gt;  lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt; lt;/divgt; lt;div style="overflow-x:auto;"gt;  lt;table id='resultStenen' class="table table-striped"gt;  lt;theadgt;  lt;trgt;  lt;thgt;Aantal Stenenlt;/thgt;  lt;/trgt;  lt;/theadgt;  lt;tbodygt;  lt;trgt;  lt;td name="Aantal Stenen" id="totaal"gt;lt;/tdgt;  lt;/trgt;  lt;/tbodygt;  lt;/tablegt; lt;/divgt; lt;scriptgt;  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";  }; lt;/scriptgt; lt;/bodygt; lt;/htmlgt; ```  

В вашем HTML-коде, похоже, нет никакого элемента с id="actieveLijst"

Что затем заставляет document.getElementById(actieveLijst) оценить, чтобы null .

So getElementById возвращает либо Element или null , и вы должны проверить наличие этих случайностей, чтобы удовлетворить Typescript, т. Е. Добавить оператор if. Вы также можете добавить ? в цепочку операцию: document.getElementById(actieveLijst)?.style.display = "block";