javascript - How to get the value of a textfield into another Textfield?

Question

My Task: Create 2 text areas and a button, assign the text in the 1st text area with the first verse of the song When you click on the button, all vowels (aeiou) should be replaced by an a and the result should then be in the 2nd text field

My code: Drei Chinesen mit dem Kontrabass sa?en auf der Stra?e und erz?hlten sich was. Da kam die Polizei, fragt? Was ist denn das?‘ Drei Chinesen mit dem Kontrabass.

Los

<script>

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('button')
        .addEventListener('click', changeVowels);
    var durchlauf = 0;

    function changeVowels() {
        var vowels = ['a', 'e', 'i', 'o', 'u'];
        var text = document.querySelector('textarea')
            .innerHTML;
        var ergebnis = text.replace(/[aeiou]/ig, vowels[durchlauf]);
        document.querySelector('textarea')
            .value = ergebnis;
        if (durchlauf < (vowels.length - 1)) {
            durchlauf++;
        } else {
            durchlauf = 0;
        }
    }
});

My question is, how do I get the value of the first textarea into to second.
Thanks for your help in advance!

Answer 1

Have a look at this snippet:

let durchlauf = 0;
const vowels = ['a', 'e', 'i', 'o', 'u'];

function changeVowels() {
    let text = document.querySelector('#original').value;
    const ergebnis = text.replace(/[aeiou]/ig, vowels[durchlauf]);
    document.querySelector('#edit').innerText = ergebnis;
    if (durchlauf < (vowels.length - 1))
        durchlauf++;
    else durchlauf = 0;
}
document.getElementById('button').addEventListener('click', changeVowels);

textarea {
  width: 100%;
  height: 50px;
}

<textarea id="original">Drei Chinesen mit dem Kontrabass sa?en auf der Stra?e und erz?hlten sich was. Da kam die Polizei, fragt? Was ist denn das?‘ Drei Chinesen mit dem Kontrabass.</textarea>

<textarea id="edit"></textarea>

<button id="button">Click</button>