通过表单提交的 HTML 更改元素答案

【问题标题】：HTML change element via Form submission通过表单提交的 HTML 更改元素
【发布时间】：2021-08-06 19:33:36
【问题描述】：

您好，我对 JavaScript 比较陌生，在为项目创建网页时遇到了问题。我有一个如下所示的表格：

<div class = "frame3" id = "frame3">
        <table id = "info_table" style = "width:100%">
            <tr>
                <th>Linie</th>
                <th>Start Datum</th> 
                <th>End Datum</th>
            </tr>
            <tr>
                <td id = "linie">24</td>
                <td id = "start">01.02.2020</td>
                <td id = "end">01.02.2020</td>
            </tr>
        </table>
    </div>

我有一个如下所示的表单：

<div class = "searchbar" id = "searchbar">
        <form onSubmit = "return process();">
            
            <label for = "label">Linie:</label>
            <input type = "number" id = "label" placeholder = "Linie">
            
            <label for = "time_start">Von:</label>
            <input type = date id = "time_start" name = "time_start">
            
            <label for = "time_start">Bis:</label>
            <input type = date id = "time_end" name = "time_end">

            <input type = "submit" id = "submit">
        </form>
    </div>

我希望表单提交替换表格中的元素。我的想法如下，但是提交后，没有变化。如果有人知道我错过了什么，那就太好了！

function process(){
        document.getElementById("linie").innerHTML = document.getElementById("label").value;
        document.getElementById("start").innerHTML = document.getElementById("time_start").value;
        document.getElementById("end").innerHTML = document.getElementById("time_end").value;
    };

【问题讨论】：

在 process 函数中写一个记录器以确保它被调用。我们不知道您是如何获得 JS 的。同时记录你的左右手操作数，这样你就知道你实际上是从浏览器获取元素。

标签： javascript html dom-events

【解决方案1】：

如果您的函数被调用，您的 DOM 可能正在正确更改，但之后页面正在刷新，为了防止出现默认行为，您需要 return false;。下面的工作：

function process() {
  document.getElementById("linie").innerHTML = document.getElementById("label").value;
  document.getElementById("start").innerHTML = document.getElementById("time_start").value;
  document.getElementById("end").innerHTML = document.getElementById("time_end").value;
  return false;
};

<div class="frame3" id="frame3">
  <table id="info_table" style="width:100%">
    <tr>
      <th>Linie</th>
      <th>Start Datum</th>
      <th>End Datum</th>
    </tr>
    <tr>
      <td id="linie">24</td>
      <td id="start">01.02.2020</td>
      <td id="end">01.02.2020</td>
    </tr>
  </table>
</div>

<form onSubmit="return process();">

  <label for="label">Linie:</label>
  <input type="number" id="label" placeholder="Linie">

  <label for="time_start">Von:</label>
  <input type=d ate id="time_start" name="time_start">

  <label for="time_start">Bis:</label>
  <input type=d ate id="time_end" name="time_end">

  <input type="submit" id="submit">
</form>
</div>

【讨论】：