Textarea gives number 0 on .reset()

Question

I have created a form with texareas that displays the input of the texarea in another form with disabled texareas. I have created a function that clones both of the forms and added a .reset() on both forms when button is clicked.

I have a issue where the form that displays the the output (the disabled textareas) shows a 0 instead of being cleared while the first form resets correctly. I cant figure out what the problem is so i was hoping to get some help with this.

My code below:

    /* 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>

See example here: jsfiddle

Answer 1

Personally, I would only call one function to submit the data and then after you copy the disabled fields, reset the form and set the output fields to empty.

Something like this in your appendUtdanningHøyre() function.

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