在学习HTML的过程中，当我进入“实体名称，编号和符号”时，我决定运用我的C ++基本知识来显示某些符号，具体取决于用户输入的最小值和最大值。
我创建了一个HTML表单和一个table元素，编写了一个JavaScript函数，用所需的符号填充HTML table元素。结果显示该表格仅在显示屏上闪烁。可能是什么问题？请参见下面的代码：
<h2 style="margin-left: 400px;">
LIST OF HTML ENTITY NUMBERS AND SYMBOLS
</h2>
<form
action=""
style="
border: 2px solid black;
width: fit-content;
padding: 5px 10px 5px 10px;
margin: auto;
font-size: 20px;
"
>
<label for="inputMin">Minimum Value:</label>
<input
type="text"
name="minValue"
id="minValue"
style="
font-size: 16px;
height: 25px;
border: 1.5px solid black;
padding: 3px 5px 2px 10px;
"
/>
<label for="inputMax">Maximum Value:</label>   
<input
type="text"
name="maxValue"
id="maxValue"
style="
font-size: 16px;
height: 25px;
border: 1.5px solid black;
padding: 3px 5px 2px 10px;
"
/>
<button
onclick="genSymb()"
style="
font-size: 16px;
font-weight: bolder;
color: black;
background-color: skyblue;
height: 30px;
border: 1.5px solid black;
padding: 3px 5px 2px 5px;
"
>
Generate Symbols
</button>
</form>
<br /><br /><br />
<table id="entSymTab" style="font-size: 30px; margin: auto;">
<!-- <th colspan="10">HTML ENTITY NUMBERS AND SYMBOLS</th> -->
</table>
<script>
function genSymb() {
// document.getElementById("entSymTab").innerHTML = "";
var min;
var max;
if (
document.getElementById("minValue").value == "" ||
document.getElementById("minValue").value == 0
) {
min = 1;
} else {
min = document.getElementById("minValue").value;
}
if (
document.getElementById("maxValue").value == "" ||
document.getElementById("maxValue").value == 0
) {
max = 1;
} else {
max = document.getElementById("maxValue").value;
}
document.getElementById("entSymTab").innerHTML =
"<th colspan='10'>HTML ENTITY NUMBERS AND SYMBOLS</th>";
for (var dr = 1; dr <= Math.ceil((max - min + 1) / 10); dr++) {
document.getElementById("entSymTab").innerHTML =
document.getElementById("entSymTab").innerHTML +
"<tr>" +
"<td>" +
(min - 10 + 10 * dr) +
"<br><br>" +
("&#" + (min - 10 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 9 + 10 * dr) +
"<br><br>" +
("&#" + (min - 9 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 8 + 10 * dr) +
"<br><br>" +
("&#" + (min - 8 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 7 + 10 * dr) +
"<br><br>" +
("&#" + (min - 7 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 6 + 10 * dr) +
"<br><br>" +
("&#" + (min - 6 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 5 + 10 * dr) +
"<br><br>" +
("&#" + (min - 5 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 4 + 10 * dr) +
"<br><br>" +
("&#" + (min - 4 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 3 + 10 * dr) +
"<br><br>" +
("&#" + (min - 3 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 2 + 10 * dr) +
"<br><br>" +
("&#" + (min - 2 + 10 * dr)) +
"</td>" +
"<td>" +
(min - 1 + 10 * dr) +
"<br><br>" +
("&#" + (min - 1 + 10 * dr)) +
"</td>" +
"</tr>";
}
}
</script>
您位于表单元素内。每当您单击按钮时，您都将提交表单，也就是表单的重新加载（闪烁）页面。如果您不需要表格，请不要使用表格。
可以使用e.preventDefault（）;来防止重新加载页面。在Submit函数中，您将不得不从表单中将e传递给该函数。
JsFiddle与表单。添加到窗体onSubmit句柄，并将事件传递给它。
<form onSubmit="genSymb(event)">
更改按钮类型以提交，并从中删除功能 onClick
<button type="submit">
更改genSymb函数以接收事件并防止触发默认的get请求。
function genSymb(e){
e.preventDefault();
}
我只建议不要使用表单，因为这似乎不打算在后端使用此数据。要解决您的问题，您要做的就是将更<from>...</form>改为<div>...</div>或任何其他合适的标签。查看我对jsfiddle示例的评论。
其他事项：我不确定您为什么使用vars。使用它们通常是不好的做法。使用let和const代替。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句