[HTML表格使用JavaScript填充时闪烁

Question

[在学习HTML的过程中，当我进入'实体名称，编号和符号'时，我决定运用我的C ++基本知识来显示取决于用户输入的最小值和最大值的某些符号。

我创建了一个HTML表单和一个表格元素，编写了一个JavaScript函数，用所需的符号填充HTML表格元素。结果显示该表仅在显示屏上闪烁。可能是什么问题？参见下面的代码：

<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>&nbsp;&nbsp;&nbsp;
  <input
    type="text"
    name="minValue"
    id="minValue"
    style="
      font-size: 16px;
      height: 25px;
      border: 1.5px solid black;
      padding: 3px 5px 2px 10px;
    "
  />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  <label for="inputMax">Maximum Value:</label>&nbsp&nbsp&nbsp
  <input
    type="text"
    name="maxValue"
    id="maxValue"
    style="
      font-size: 16px;
      height: 25px;
      border: 1.5px solid black;
      padding: 3px 5px 2px 10px;
    "
  />&nbsp;&nbsp;&nbsp;&nbsp;
  <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>

Answer 1

您位于表单元素内。每当您单击按钮时，您都将提交表单，也就是表单的重新加载（闪烁）页面。如果您不需要表格，请不要使用表格。

防止页面重新加载可以通过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>或任何其他合适的标签即可。