我有一些輸入元素，我想創建一個重置按鈕，以便我可以通過編程將它們恢復values到原始狀態。
這是我的代碼：
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>這實際上按預期作業，但我收到一個錯誤，指出'data-name'無法讀取的值，但這不可能是真的，因為該函式按預期作業。
有誰知道這里發生了什么以及我如何解決這個問題？
uj5u.com熱心網友回復：
in不僅迭代物件本身的所有可列舉屬性，還迭代內部原型鏈中的所有物件。記錄密鑰，您將看到：
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已不僅僅是列舉的屬性0，1和2，因此試圖訪問.dataset這些其他屬性失敗。
for..of改為使用來呼叫集合的迭代器（它只會根據需要迭代集合中的元素）。
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回圈通常-通常，for..of或Object.keys或Object.entries作業做得更好。
uj5u.com熱心網友回復：
這行代碼在這里
for (var key in people)
應該
for (let i = 0; i < people.length; i )
因為 for...in... 回圈也將獲得HTMLCollection的length屬性people。然后，您將訪問不存在的的value屬性people.length。
完成代碼：
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/348811.html
標籤：javascript html