Why does getting a data-attribute within a loop work, but still throws an error?

user_1732907 0
Viewed 48

I have some input elements and I want to create a reset button, so that I can programatically revert their values to their original state.

Here is my code:

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>

This actually works as intended, but I get an error saying that the value of 'data-name' cannot be read, but this cannot be true as the function works as intended.

Does anyone know what is happening here and how I can fix this?

html javascript
2 Answers

in iterates over all enumerable properties in not only the object itself, but also in all objects in the internal prototype chain. Log the key, and you'll see:

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>

The HTMLCollection has more enumerable properties than just 0, 1, and 2, so trying to access the .dataset on those other properties fails.

Use for..of instead, to invoke the collection's iterator (which will only iterate over the elements in the collection, as desired).

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>

In general, I'd suggest avoiding in loops usually - often, for..of or Object.keys or Object.entries work better.

user_95152070

This line of code here

for (var key in people)

should be

for (let i = 0; i < people.length; i++)

as the for...in... loop will also get the length property of the people HTMLCollection. You would then be accessing the value property of people.length, which does not exist.

Completed Code:

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>

user_138141600
Related