Tengo algunos elementos de entrada y quiero crear un botón de reinicio, para que pueda revertir sus values a su estado original mediante programación.
Aquí está mi código:
let people = document.getElementsByClassName('person') function reset() { for (var key in people) { let string = people[key].dataset.name people[key].value = string } } let app = document.getElementById('app') let button = document.createElement('button') button.innerHTML = "reset" button.addEventListener('click', reset) app.append(button) <div id="app"> <input class="person" data-name="John" value="John"> <input class="person" data-name="Steve" value="Steve"> <input class="person" data-name="Peter" value="Peter"> </div> Esto realmente funciona según lo previsto, pero aparece un error que dice que el valor de 'data-name' no se puede leer, pero esto no puede ser cierto ya que la función funciona según lo previsto.
¿Alguien sabe qué está pasando aquí y cómo puedo solucionarlo?
itera in todas las propiedades enumerables no solo en el objeto en sí, sino también en todos los objetos en la cadena interna del prototipo. Registre la clave y verá:
let people = document.getElementsByClassName('person') function reset() { for (var key in people) { console.log(key); } } reset(); <div id="app"> <input class="person" data-name="John" value="John"> <input class="person" data-name="Steve" value="Steve"> <input class="person" data-name="Peter" value="Peter"> </div> HTMLCollection tiene más propiedades enumerables que solo 0 , 1 y 2 , por lo que falla el intento de acceder al .dataset en esas otras propiedades.
Use for..of en su lugar, para invocar el iterador de la colección (que solo iterará sobre los elementos de la colección, según se desee).
let people = document.getElementsByClassName('person') function reset() { for (const input of people) { input.value = input.dataset.name; } } let app = document.getElementById('app') let button = document.createElement('button') button.innerHTML = "reset" button.addEventListener('click', reset) app.append(button) <div id="app"> <input class="person" data-name="John" value="John"> <input class="person" data-name="Steve" value="Steve"> <input class="person" data-name="Peter" value="Peter"> </div> En general, sugeriría evitar los bucles in lo general, a menudo, for..of u Object.keys u Object.entries funcionan mejor.
Esta línea de código aquí
for (var key in people)debiera ser
for (let i = 0; i < people.length; i++) ya que el bucle for...in... también obtendrá la propiedad de length de la colección HTML de people . Entonces estaría accediendo a la propiedad value de people.length , que no existe.
Código completado:
let people = document.getElementsByClassName('person') function reset() { for (let i = 0; i < people.length; i++) { let string = people[i].dataset.name people[i].value = string } } let app = document.getElementById('app') let button = document.createElement('button') button.innerHTML = "reset" button.addEventListener('click',reset) app.append(button) <div id="app"> <input class="person" data-name="John" value="John"> <input class="person" data-name="Steve" value="Steve"> <input class="person" data-name="Peter" value="Peter"> </div>