我正在學習 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> ```
uj5u.com熱心網友回復：
您的 HTML 代碼似乎沒有任何元素 id="actieveLijst"
然后導致document.getElementById(actieveLijst)評估為null.
uj5u.com熱心網友回復：
因此，getElementById回傳Elementornull并且您必須檢查這些可能性以滿足 Typescript，即添加 if 陳述句。您還可以?在鏈式操作中添加：
document.getElementById(actieveLijst)?.style.display = "block";
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/365500.html
標籤：javascript html
下一篇：居中表單，在按鈕之后