重置日期输入类型，输入显示在禁用的文本区域上并附加在之后

Question

我有一个表单，一侧有输入字段，另一侧禁用输入字段，显示相应输入字段的值。我也可以选择用一个按钮来克隆这些表格，同时克隆两侧，其中之一是教育，所以可以进行多种教育等。

除日期输入和输出字段外，一切正常，如果我对它们使用 .reset() 或 document.getElementById("myid").value = "";，输出将停止工作，它只是保持空白。此外，即使我不重置它们，日期选择器也会在克隆后停止工作。

这是我的 javascript 表单这一部分的代码

/* Print funksjon for år fra */
    
    function velgDatoUtdanning() {
      var årUtdanning = document.getElementById("input-år").value;
      document.getElementById("output-år").innerHTML = årUtdanning;
    }
    
    /* Print funksjon for år til */
    
    function velgDatoUtdanningTil() {
      var årUtdanningTil = document.getElementById("input-årtil").value;
      document.getElementById("output-årtil").innerHTML = årUtdanningTil;
    }
    
    /* Print funksjon for skole */
    
    var inputBox = document.getElementById("input-skole");
    
    inputBox.onkeyup = function () {
      document.getElementById("output-skole").innerHTML = inputBox.value * 2;
      var val = document.getElementById("input-skole").value;
      document.getElementById("output-skole").value = val;
    };
    
    /* Print funksjon for fag */
    
    var inputBox = document.getElementById("input-fag");
    
    inputBox.onkeyup = function () {
      document.getElementById("output-fag").innerHTML = inputBox.value * 2;
      var val = document.getElementById("input-fag").value;
      document.getElementById("output-fag").value = val;
    };

    /* Legg til ny utdanning append method */
    
    function appendUtdanning() {
      if (document.getElementById("input-skole").value == "") {
        return false;
      } else if (document.getElementById("input-fag").value == "") {
        return false;
      } else {
        let formUtdanning = document.querySelector("#reset-utdanning");
        let clonedFormUtdanning = formUtdanning.cloneNode(true);
        clonedFormUtdanning.id = "formUtdanning-kopi";
        var utdanningNy = document.body.appendChild(clonedFormUtdanning);
        document.getElementById("motta-utdanning").appendChild(utdanningNy);
        document.getElementById("reset-utdanning").reset();
    
        let formUtdanningHøyre = document.querySelector("#copy-høyre");
        let clonedFormUtdanningHøyre = formUtdanningHøyre.cloneNode(true);
        clonedFormUtdanningHøyre.id = "formUtdanningHøyre-kopi";
        var utdanningNyHøyre = document.body.appendChild(clonedFormUtdanningHøyre);
        document
          .getElementById("motta-utdanningHøyre")
          .appendChild(utdanningNyHøyre);
        document.getElementById("output-skole").value = "";
        document.getElementById("output-fag").value = "";
        addEventListener("click", function (event) {
          event.preventDefault();
        });
      }
    }

<div id="copy-utdanning">
  <form id="reset-utdanning" class="venstre-form">
    <div class="utdanning">
      <table id="duplisere-utdanning">
        <h4 class="h4-venstre">Utdanning</h4>
        <tr>
          <label for="FraUtdanning">Fra</label>
          <input type="date" rows="2" maxlength="50" id='input-år' class="venstre-input" placeholder="År" onchange="velgDatoUtdanning()"></input>
        </tr>
        <tr>
          <label for="FraUtdanning">Til</label>
          <input type="date" rows="2" maxlength="50" id='input-årtil' class="venstre-input" placeholder="År" onchange="velgDatoUtdanningTil()"></input>
        </tr>
        <tr>
          <textarea type='text' rows="1" maxlength="50" id='input-skole' class="venstre-input" placeholder="Skole"></textarea>
        </tr>
        <tr>
          <textarea type='text' rows="1" maxlength="50" id='input-fag' class="venstre-input" placeholder="Fag"></textarea>
        </tr>
      </table>
    </div>
  </form>
</div>
<div class="kopi-knapp">
  <button class="knapp" id="appendUtdanningknapp" onclick="appendUtdanning();">Legg til utdanning</button>
</div>
<div id="motta-utdanning">

</div>

<div>
  <div class="output-posisjon">
    <div id="copy-utdanningHøyre">
      <form id="copy-høyre">
        <table id="" class="">
          <tbody>
            <tr>
              <th>Utdanning</th>
            </tr>
            <tr>
              <td><textarea type="date" class="textarea-høyre" type='text' id='output-år' disabled></textarea></td>
              <td><textarea type="date" class="textarea-høyre" type='text' id='output-årtil' disabled></textarea></td>
            </tr>
          </tbody>
          <tbody>
            <tr>
              <td><textarea class="textarea-høyre" type='text' id='output-skole' disabled></textarea></td>
              <td><textarea colspan="2" class="textarea-høyre" type='text' id='output-fag' disabled></textarea></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div id="motta-utdanningHøyre">

    </div>
  </div>
</div>

这是当我重置显示日期的输出 texareas 时发生的情况：JSFiddle

有人知道如何正确重置输出日期字段或我哪里出错了吗？

Answer 1

我最终找到了一个解决方法，我必须做的是创建一个类型为 html 的脚本并添加我想在其中克隆的 html，这样我就不需要重置任何东西，即使它不能帮助我找出问题的根源。

重置日期输入类型，输入显示在禁用的文本区域上并附加在之后

Reset date input type with input displayed on a disabled textarea and appended after

html

javascript

dom

clonenode

append