InnerHTML will not change in every keydown event

Question

The following code is for changing the innerHTML of an element ( myNote) to the value of another element ( myInput), each time Returning strong>:

// ==UserScript==
// @name        Duolingo
// @include     *://duolingo.com/*
// @include     *://www.duolingo.com/*
// ==/UserScript==
setTimeout(()=>{
  let myInput = document.querySelector('._7q434._1qCW5._2fPEB._3_NyK._1Juqt._3WbPm');
  let myNote = document.createElement('div');
  document.body.appendChild(myNote);
  myNote.setAttribute("style", "position: fixed; bottom: 0; right: 0; display: block; width: 400px; height: 400px; background: orange; color: #000");

  myInput.addEventListener('keydown', (k)=>{
    if ( k.keyCode === 13 ) {
      myNote.innerHTML += myInput.value + '<br>';
    }
  });
}, 2000);

purpose

I run the code in Greasemonkey on duolingo.com (a site for learning mind2mind languages ​​such as French), in textual sessions of questions such as “translate this sentence”.

The purpose of the code is to create a small orange frame containing the inputs that I have already tried on Duolingo questions, given that Duolingo does not save them.

With a script, I could save them and then use them if I answer a language question, as it will save me some time by renaming most of the sentence.

Problem

, innerHTML . , Return, .

, Greasemonkey ( ) duolingo.com.

innerHTML ? , addEventListener , ?

return return false .

, , , .

Mobius:

Mobius, , , :

setTimeout(()=>{
    window.myCss =`.note {position: fixed; bottom: 0; right: 0; width: 400px; height: 400px; background: orange}`;
    style = document.createElement("style");
    style.type = "text/css";
    style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss) );
    head = document.head || document.getElementsByTagName("head")[0];
    head.appendChild(style);

    let note = document.createElement('div');
    note.classList.add('note');
    document.querySelector('body').appendChild(note);

  let savedValue;
    document.addEventListener('keydown', (e)=>{
    let target = e.target;
    if (target.nodeName === 'textarea') {
        savedValue = e.target.value;
        }
    });

    if (k.keyCode === 13) {
        setTimeout(()=>{
            document.querySelector('textarea').value = savedValue;
        }, 100);
    }
}, 2500);

.

, , ( , html textarea , , . , , ...

Answer 1

( ), , - . , , . myInput .

. myInput .

:

• ._7q434._1qCW5._2fPEB._3_NyK._1Juqt._3WbPm - -. , .

  textarea[data-test], , . textarea , .

• setTimeout - . waitForKeyElements, MutationObserver . , , , , - .

, :

// ==UserScript==
// @name        Duolingo, answer text recycler
// @match       *://*.duolingo.com/*
// @run-at      document-idle
// ==/UserScript==
let myNote = document.createElement ('div');
document.body.appendChild (myNote);
myNote.setAttribute (
    "style",
    "position: fixed; bottom: 0; right: 0; width: 400px; height: 400px; background: orange; overflow: auto;"
);

document.addEventListener ('keydown', (zEvent) => {
    if (zEvent.keyCode === 13) {
        if (zEvent.target.nodeName === 'TEXTAREA') {
            let myInput = document.querySelector ('textarea[data-test]');
            if (myInput) {
                myNote.innerHTML += myInput.value + '<br>';
            }
        }
    }
} );

Answer 2

duolingo , , , , , . , , , (, ), , , , body, , , .

:

let savedValue = '';
document.addEventListener('keydown', (e) => {
    let target = e.target;
    if (target.nodeName == 'TEXTAREA') {
        // save off the text value;
        savedValue = e.target.value;
    }

    if (e.keyCode == 13){
        setTimeout(() => { 
            document.querySelector('textarea').value = savedValue;
        }, 10);
    }
}, true)

Answer 3

// ==UserScript==
// @name        Duolingo
// @namespace   nms
// @include     *://duolingo.com/*
// @include     *://www.duolingo.com/*
// @version     1
// @grant       none
// ==/UserScript==

setTimeout(()=>{
    // Style:

        /*let myCss =`
            .note {position: fixed; bottom: 0; right: 0; width: 400px; height: 400px; background: orange}
        `;*/
      let myCss =`
            .note {position: fixed; top: 100px; left:100px; bottom: 100px; right: 100px; width: 200px; height: 200px; background: orange}
        `;  

        style = document.createElement("style");
        style.type = "text/css";
        style.styleSheet ? style.styleSheet.cssText = myCss : style.appendChild(document.createTextNode(myCss) );

        head = document.head || document.getElementsByTagName("head")[0];
        head.appendChild(style);

    // Behavior:

        let myNote = document.createElement('div');
        myNote.classList.add('note');
        document.querySelector('body').appendChild(myNote);
        let myInputField = document.querySelector('textarea');

        myInputField.addEventListener('keydown', (k)=>{
            if ( k.keyCode === 13 ) {
                myNote.innerHTML = myInputField.value;
            }
        });
}, 2000);

<textarea></textarea>
<br>
<div id="myNote">

</div>

Hide result

StackOverflow, . css , , . . Google Chrome 49.0.2623.112 m.