我不知道為什么，但由于某種原因，我在運行基于 HTML 選擇選項中的用戶選擇的函式時遇到問題...
我只做一個（querySelector）就可以讓它作業，但是當我做querySelectorAll并創建一個for回圈時，事情就不起作用了。
任何幫助將不勝感激！
let userLocation = document.querySelectorAll('#userLocation');
for(i=0; i < userLocation.length; i ) {
userLocation[i].addEventListener('change', function() {
if(userLocation[i].value === "North Carolina") {
alert('True');
}
}
});<section id="users">
<div class="container">
<div class="user-box">
<h3>Frank</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Dan</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Jimmy</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Bob</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
</div>
</section>uj5u.com熱心網友回復：
你有兩個錯誤：
);呼叫的右括號和分號 ( )addEventListener放置在回圈的右大括號 (})for之后，而不是事件處理函式的右大括號之后：
for(i=0; i < userLocation.length; i ) {
userLocation[i].addEventListener('change', function() {
if(userLocation[i].value === "North Carolina") {
alert('True');
}
} // <-- ); should be here
}); // <-- ); is here
- 回圈中的索引變數
for使用默認var范圍/定義，這將導致所有偵聽器關閉最后一個值（這意味著所有偵聽器將使用最后一個偵聽器的select'svalue。請參閱回圈內的 JavaScript 閉包 - 更多的簡單實用示例。您可以修復這通過使用let i = 0而不是僅僅i = 0;
這是您修復了這兩件事的代碼：
let userLocation = document.querySelectorAll('#userLocation');
for (let i=0; i < userLocation.length; i ) {
userLocation[i].addEventListener('change', function() {
if(userLocation[i].value === "North Carolina") {
alert('True');
}
});
}<section id="users">
<div class="container">
<div class="user-box">
<h3>Frank</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Dan</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Jimmy</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Bob</h3>
<label>Location:</label>
<select id="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
</div>
</section>其他幾件事：
您應該盡量避免
id在同一個 DOM 中出現重復值。雖然querySelectorAll('#userLocation')有效，但id值應該是唯一的。您可以將一個類用于相同的目的，并且類不必是唯一的。您可以完全避免使用
number基于 - 的回圈變數，Array#forEach()它允許您關閉實際的元素參考而不是querySelectorAll集合中的索引。
這是兩個調整的示例：
let userLocation = document.querySelectorAll('.userLocation');
userLocation.forEach(l => {
l.addEventListener('change', function () {
if (l.value === "North Carolina") {
alert('True');
}
});
});<section id="users">
<div class="container">
<div class="user-box">
<h3>Frank</h3>
<label>Location:</label>
<select class="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Dan</h3>
<label>Location:</label>
<select class="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Jimmy</h3>
<label>Location:</label>
<select class="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
<div class="user-box">
<h3>Bob</h3>
<label>Location:</label>
<select class="userLocation">
<option value="">Select</option>
<option value="North Carolina">North Carolina</option>
<option value="South Carolina">South Carolina</option>
<option value="Maine">Maine</option>
</select>
</div>
</div>
</section>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/493430.html
標籤：javascript for循环
下一篇：js中的多個字母計數