我在多个选择元素上实现onchange事件时遇到问题。每次选择元素更改时,它都不会产生期望的结果。下面是代码:
/**Javascript:**/
var selectedOptions = [];
document.addEventListener("DOMContentLoaded", function(event) {
var selectElements = ["question1","question2","question3"];
initSelectChangeListener(selectElements);
});
function initSelectChangeListener(elementids){
for(a = 0; a < elementids.length; a++){
var element = document.getElementById(elementids[a]);
element.onchange = function(){ onOptionSelected(element) };
console.log(element.id + " onchange listener is applied...");
}
}
function onOptionSelected(element){
console.log("---------------------------");
console.log("Element : " + element.id);
console.log("Index : " + element.options.selectedIndex);
var option = element.options[element.options.selectedIndex].text;
console.log("Selected Option : " + option);
console.log("---------------------------");
}
<!DOCTYPE html>
<br/>
Security Question 1 :
<select id="question1" name="question1">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 2 :
<select id="question2" name="question2">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 3 :
<select id="question3" name="question3">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
即使我选择了第一个和第二个元素,它也始终指出第三个元素。请参见附件中的输出图像。Please see the image here
答案 0 :(得分:1)
这与范围有关。 {...}
在JavaScript中没有自己的作用域。因此,当循环结束时, a 仅保留迭代的最后一个值。
使用关键字let声明变量 a 。这将为循环内的变量创建一个单独的作用域。
更改
for(a = 0; a < elementids.length; a++){
收件人
for(let a = 0; a < elementids.length; a++){
var selectedOptions = [];
document.addEventListener("DOMContentLoaded", function(event) {
var selectElements = ["question1","question2","question3"];
initSelectChangeListener(selectElements);
});
function initSelectChangeListener(elementids){
for(let a = 0; a < elementids.length; a++){
var element = document.getElementById(elementids[a]);
element.onchange = function(){ onOptionSelected(element) };
console.log(element.id + " onchange listener is applied...");
}
}
function onOptionSelected(element){
console.log("---------------------------");
console.log("Element : " + element.id);
console.log("Index : " + element.options.selectedIndex);
var option = element.options[element.options.selectedIndex].text;
console.log("Selected Option : " + option);
console.log("---------------------------");
}
Security Question 1 :
<select id="question1" name="question1">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 2 :
<select id="question2" name="question2">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 3 :
<select id="question3" name="question3">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
IE::如果您使用的是 IE ,请使用(function(){})()
语法。这将在所有浏览器中正常工作。
var selectedOptions = [];
document.addEventListener("DOMContentLoaded", function(event) {
var selectElements = ["question1","question2","question3"];
initSelectChangeListener(selectElements);
});
function initSelectChangeListener(elementids){
for(let a = 0; a < elementids.length; a++){
(function(b){
var element = document.getElementById(elementids[b]);
element.onchange = function(){ onOptionSelected(element) };
console.log(element.id + " onchange listener is applied...");
})(a);
}
}
function onOptionSelected(element){
console.log("---------------------------");
console.log("Element : " + element.id);
console.log("Index : " + element.options.selectedIndex);
var option = element.options[element.options.selectedIndex].text;
console.log("Selected Option : " + option);
console.log("---------------------------");
}
Security Question 1 :
<select id="question1" name="question1">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 2 :
<select id="question2" name="question2">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
<br/><br/>
Security Question 3 :
<select id="question3" name="question3">
<option value="What is your favorite color?">What is your favorite color?</option>
<option value="What is the name of your school in elementary?">What is the name of your school in elementary?</option>
<option value="What is the name of your fist pet?">What is the name of your fist pet?</option>
<option value="Who is your first love?">Who is your first love?</option>
</select>
答案 1 :(得分:0)
在您的代码中,变量element
在函数中声明为全局变量存在问题。
有两种解决方案:
使用let
将变量设置为本地:
function initSelectChangeListener(elementids) {
for (a = 0; a < elementids.length; a++) {
let element = document.getElementById(elementids[a]);
element.onchange = function() {
onOptionSelected(element)
};
console.log(element.id + " onchange listener is applied...");
}
}
在应用于this
的{{1}}函数中使用onchange
:
element
function initSelectChangeListener(elementids) {
for (a = 0; a < elementids.length; a++) {
var element = document.getElementById(elementids[a]);
element.onchange = function() {
onOptionSelected(this)
};
console.log(element.id + " onchange listener is applied...");
}
}
var selectedOptions = [];
document.addEventListener("DOMContentLoaded", function(event) {
var selectElements = ["question1", "question2", "question3"];
initSelectChangeListener(selectElements);
});
function initSelectChangeListener(elementids) {
for (a = 0; a < elementids.length; a++) {
var element = document.getElementById(elementids[a]);
element.onchange = function() {
onOptionSelected(this)
};
console.log(element.id + " onchange listener is applied...");
}
}
function onOptionSelected(element) {
console.log("---------------------------");
console.log("Element : " + element.id);
console.log("Index : " + element.options.selectedIndex);
var option = element.options[element.options.selectedIndex].text;
console.log("Selected Option : " + option);
console.log("---------------------------");
}