¿Por qué el elemento de entrada no se actualiza?
function route() { let textfield = { inputEl: document.querySelector('#textfield'), setValue: function(str) { this.inputEl.value = str; } }; textfield.inputEl.addEventListener('click', function(event) { document.body.innerHTML += '<button id="select">Select</button>'; owner(textfield); }); } function owner(controller) { document.querySelector('#select').addEventListener('click', function(event) { controller.setValue("Hello Universe!"); }); } route(); Sé cómo solucionar este problema, pero prefiero usar controller.setValue() para actualizar la entrada.
ACTUALIZADO
He actualizado el código a continuación; con suerte, esto se acerca más a lo que está tratando de lograr.
Necesitaba agregar un contenedor donde colocar el botón (en lugar de agregarlo al body ), así que agregué un contenedor como este:
<div id="container"> <input type="text" id="textfield" /> </div>Luego, podemos agregarle el botón como un niño, así:
document.getElementById('container').appendChild(btn);Ver código actualizado a continuación
function route() { let textfield = { inputEl: document.querySelector('#textfield'), setValue: function(str) { this.inputEl.value = str; } }; textfield.inputEl.addEventListener('click', function(event) { // add the button if it's not already in there if(document.getElementById('select')){ return; } let btn = document.createElement('button'); btn.id = 'select'; btn.innerHTML = 'Select'; document.getElementById('container').appendChild(btn); owner(textfield); }); } function owner(controller) { document.getElementById('select').addEventListener('click', function(event) { controller.setValue("Hello Universe!"); }); } route(); <div id="container"> <input type="text" id="textfield" /> </div>