TypeError: null 不是对象（正在评估 'document.getElementById(actieveLijst).style'）
2021-11-24
2466
我正在学习 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> ```
2个回答
您的 HTML 代码似乎没有任何带有
id="actieveLijst"
的元素。
这会导致
document.getElementById(actieveLijst)
的计算结果为
null
。
BuhtanDingDing
2021-11-24
因此
getElementById
返回
Element
或
null
，您必须检查这些可能性以满足 Typescript，即添加 if 语句。您还可以在链式操作中添加
?
：
document.getElementById(actieveLijst)?.style.display = "block";
Tim Jensen
2021-11-24