Textarea 在 .reset() 上给出数字 0

Question

我创建了一个带有 texareas 的表单，它以另一个禁用 texareas 的表单显示 texarea 的输入。我创建了一个函数，可以克隆这两种形式，并在单击按钮时在两种形式上添加 .reset()。

我遇到一个问题，显示输出的表单（禁用的文本区域）显示 0 而不是在第一个表单正确重置时被清除。我不知道问题出在哪里，所以我希望得到一些帮助。

我的代码如下：

    /* Print funksjon for år */
    
    var inputBox = document.getElementById('input-år');
    
    inputBox.onkeyup = function(){
      document.getElementById('output-år').innerHTML = inputBox.value*2;
      var val = document.getElementById('input-år').value
      document.getElementById('output-år').value = val;
    }
    
    /* 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;
    }
    
    function appendUtdanning() {
      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();
    }
    
    function appendUtdanningHøyre() {
      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("copy-høyre").reset();
    }
    
    /* Prevent page from reloading on click for utdanning */
    
    document.getElementById("appendUtdanningknapp").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>
                                            <textarea type='text' rows="1" maxlength="50" id='input-år' class="venstre-input" placeholder="År"></textarea>
                                        </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>
                            <button id="appendUtdanningknapp" onclick="appendUtdanning(); appendUtdanningHøyre();">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 class="textarea-høyre" type='text' id='output-år' disabled></textarea></td>
                                                <td><textarea class="textarea-høyre" type='text' id='output-skole' disabled></textarea></td>
                                            </tr>
                                        </tbody>
                                        <tbody>
                                            <tr>
                                                <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>

参见此处示例：jsfiddle

Answer 1

就我个人而言，我只会调用一个函数来提交数据，然后在您复制禁用的字段后，重置表单并将输出字段设置为空。

在你的 appendUtdanningHøyre() 函数中有这样的东西。

document.getElementById("output-år").value = '';
...
document.getElementById("reset-utdanning").reset();

Textarea 在 .reset() 上给出数字 0

Textarea gives number 0 on .reset()

javascript

html

reset

appendchild

clonenode