Así que estoy usando el método de plantilla para agregar dinámicamente contenido HTML en una página y quiero cambiar el valor de una entrada a través de un detector de eventos.
Aquí hay un fragmento de código completamente aleatorio como ejemplo (no tiene sentido a propósito) :
favoriteElement += `<div class="favorite__page JS-favoritePage"> <p id="JS-amountOfFavorites">Quantity of saved pages : ${amount}</p> <input type="number" class="favoritesQuantity" name="amountOfFavorites" min="1" max="100" value="${value}"> </div>`Entonces, digamos que quiero tener acceso al valor de la entrada, declararé una variable y la obtendré a través de su selector de consulta:
let inputFavoritesQuantity = document.querySelector('input [class="favoritesQuantity"]');Ahora agregaré un detector de eventos:
inputFavoritesQuantity.addEventListener("input", function(e){ let valueOfInput = e.target.value; //Other code } Aunque el problema es que no tengo acceso a la entrada porque se agrega con una plantilla , por lo que da un error Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Podría agregar todo a mano usando las propiedades createElement , setAttribute , appendChild ...
¡Pero haría que el código fuera MUY largo y difícil de mantener! (¡Sin siquiera considerar el hecho de que en mi proyecto de código tendría que agregar 5 elementos anidados que tienen 5 atributos cada uno!)
¿Hay otro método eficiente para tener acceso a un elemento con plantillas?
El DOMParser compila cadenas en un documento. Debe acceder a documentElement para agregar al dom existente. Aquí hay un ejemplo de uso.
let amount = 100 let value = 50 favoriteElement = `<div class="favorite__page JS-favoritePage"> <p id="JS-amountOfFavorites">Quantity of saved pages : ${amount}</p> <input type="number" name="amountOfFavorites" min="1" max="100" value="${value}" /> </div>` // This converts the string and gets the documentElement. var node = new DOMParser().parseFromString(favoriteElement, "text/html").documentElement //Now we are working with an actual element and not a string of text. let inputFavoritesQuantity = node.querySelector('input [class="favoritesQuantity"]'); node.addEventListener("input", function(e){ let valueOfInput = e.target.value; console.log('value changed', valueOfInput); }) var outputDiv = document.getElementById('content') outputDiv.appendChild(node); <div id="content"> </div>