Tentando alterar as propriedades de DOM de um elemento, mas as alterações são ignoradas depois que eu uso document.body.innerHTML + =. Se a ordem for alterada, as coisas funcionam bem

Question

Oct 01, 2018, 05:00 PM

Tentando alterar as propriedades de DOM de um elemento, mas as alterações são ignoradas depois que eu uso document.body.innerHTML + =. Se a ordem for alterada, as coisas funcionam bem

Eu tive dificuldade em escrever o título dessa pergunta, mas não consegui encontrar nada mais concis

Quero anexar algum eventooninput para um elemento (aqui uminput campo). Mas, por algum motivo, não funcionou. Limitei a questão ao MWE esquemático (MWE completo no final).

addEvent();
document.body.innerHTML += "a";

addEvent() era simplesmente uma função que alterava ooninput propriedade de uminput campo. Meu problema foi queaddEvent() foi ignorado.

Para ter a certezaaddEvent(); correu normalmente, eu também modifiquei ovalue doinput campo e seubackgroundColor no corpo da função. No entanto, quando eu corri o código, ooninput evalues modificações @ não foram encontradas em nenhum lugar, mas obackgroundColor foi modificado conforme a função.

Mais misterioso para mim, se eu escrever

document.body.innerHTML += "a";
addEvent();

s coisas funcionam como esperad

Minha pergunta está dividida em duas partes:

como corrigir o código deaddEvent(), para que não importa se eu escrevadocument.body.innerHTML += "a" antes ou depois, o resultado seria o mesmo?why faz obackgroundColor corra bem, enquanto o resto parece ser ignorado?

Aqui está meu MWE completo abaixo:

function addEvent() {
    var fieldScore = document.getElementById("foo");
    fieldScore.style.backgroundColor = "rgb(0,255,0)";
    fieldScore.value = "a";
    fieldScore.oninput = function () {
        console.log("bar");
    }
}

// document.body.innerHTML = buildForm();
addEvent();
document.body.innerHTML += "a";

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>

<body>
    <form><input type="text" value="" name="foo" id="foo"></form>
    <script type="text/javascript" src="mwe.js"></script>
</body>

</html>

Expected: o mesmo, mas coma noinput campo també