将onchange事件应用于多个元素

时间：2018-12-17 06:56:03

标签： javascript

我在多个选择元素上实现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

2 个答案:

答案 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("---------------------------");
}

相关问题
最新问题