JavaScript HTML 对象 HTMLSelectElement

JavaScript HTML object HTMLSelectElement

提问by thienwgu

I am trying to create a little HTML form where my users need to select some options from checkboxes and dropdown lists. The intended outcome is a text that is generated dynamically as the users change their choices. The idea does work but I keep getting “[object HTMLSelectElement]” instead of the value of the selected choice from the dropdown box. If one of you veteran JavaScript programmers could give me your opinion I'd greatly appreciate it! I spent quite some time double checking everything and I'm pretty sure my code is correct syntactically but I could be completely wrong without realizing it. I'm new at JavaScript so I'm still in a learning phase.

我正在尝试创建一个小的 HTML 表单，我的用户需要在其中从复选框和下拉列表中选择一些选项。预期的结果是随着用户改变他们的选择而动态生成的文本。这个想法确实有效，但我不断从下拉框中获取“[object HTMLSelectElement]”而不是所选选项的值。如果你们中的一位资深 JavaScript 程序员能给我您的意见，我将不胜感激！我花了很多时间仔细检查所有内容，我很确定我的代码在语法上是正确的，但我可能完全错误而没有意识到这一点。我是 JavaScript 新手，所以我仍处于学习阶段。

HTML Code:

HTML代码：

<form name="input" action="" method="get">
<input type="checkbox" name="stCode" id="ai1" onChange="generateSTcode()">
Analog Input B1
<select name="sensorType" id="sensorType1" onChange="generateSTcode()">
<option value="2">0-1 Vdc</option>
<option value="3">0-10 Vdc</option>
<option value="4">4-20mA</option>
<option value="5">Off/On</option>
<option value="6">0-5 Vdc</option>
</select>
<select name="sensor" id="sensor1" onChange="generateSTcode()">
<option value="oatp_ai">Outside air temperature</option>
<option value="satp_ai">Supply air temperature</option>
<option value="ratp_ai">Return air temperature</option>
<option value="mxtp_ai">Mixed air temperature</option>
</select><br><br>
<input type="checkbox" name="stCode" id="ai2" onChange="generateSTcode()">
Analog Input B2
<select name="sensorType" id="sensorType2" onChange="generateSTcode()">
<option value="2">0-1 Vdc</option>
<option value="3">0-10 Vdc</option>
<option value="4">4-20mA</option>
<option value="5">Off/On</option>
<option value="6">0-5 Vdc</option>
</select>
<select name="sensor" id="sensor2" onChange="generateSTcode()">
<option value="oatp_ai">Outside air temperature</option>
<option value="satp_ai">Supply air temperature</option>
<option value="ratp_ai">Return air temperature</option>
<option value="mxtp_ai">Mixed air temperature</option>
</select><br><br>
<input type="checkbox" name="stCode" id="ai3" onChange="generateSTcode()">
Analog Input B3
<select name="sensorType" id="sensorType3" onChange="generateSTcode()">
<option value="2">0-1 Vdc</option>
<option value="3">0-10 Vdc</option>
<option value="4">4-20mA</option>
<option value="5">Off/On</option>
<option value="6">0-5 Vdc</option>
</select>
<select name="sensor" id="sensor3" onChange="generateSTcode()">
<option value="oatp_ai">Outside air temperature</option>
<option value="satp_ai">Supply air temperature</option>
<option value="ratp_ai">Return air temperature</option>
<option value="mxtp_ai">Mixed air temperature</option>
</select><br><br>
</form>?
<div id="generatedCode" class="generatedCode"></div>

JavaScript Code:

JavaScript 代码：

function generateSTcode(){
var stCodegenerated = "";    
var analogInputCh = new Array(3);
analogInputCh[0] = document.getElementById('ai1');
analogInputCh[1] = document.getElementById('ai2');
analogInputCh[2] = document.getElementById('ai3');
var sensorType = new Array(3);
sensorType[0] = document.getElementById('sensorType1');
sensorType[1] = document.getElementById('sensorType2');
sensorType[2] = document.getElementById('sensorType3');
var sensor = new Array(3);
sensor[0] = document.getElementById('sensor1');
sensor[1] = document.getElementById('sensor2');
sensor[2] = document.getElementById('sensor3');
for(i = 0; i < analogInputCh.length; i++){
if(analogInputCh[i].checked){
var iTemp = i + 1;
stCodegenerated += "Ain_Conf(" + iTemp + ", " + sensorType[i] + ", AI_0" + iTemp + "); " 
+ sensor[i] + " := AI_0" + iTemp + ";" + "<br><br>";
}
}
document.getElementById("generatedCode").innerHTML = stCodegenerated;
}

DEMO: http://jsfiddle.net/XB63m/

演示：http: //jsfiddle.net/XB63m/

回答by Niccolò Campolungo

It's because you need to use .valueproperty of HTMLElement.

这是因为你需要使用.value的财产HTMLElement。

Example below:

下面的例子：

var myElement = document.getElementById('myElement'),
    myElementValue = myElement.value;

And so on.

等等。

Notice that valueworks only with inputs, if you want to get the content of a tag you should use innerHTML.

请注意，它value仅适用于输入，如果您想获取标签的内容，您应该使用innerHTML.

EDIT: I edited your code, now it works well(there was a varbefore declaring iin the for loop that could cause problems) and this is your updated JSFiddle

编辑：我编辑了您的代码，现在它运行良好（在 for 循环中var声明之前有一个i可能会导致问题的代码），这是您更新的JSFiddle

回答by Mikhail

sensorTypeand sensorare arrays of selectelements. The currently selected value of a selectelement is stored in its value. Change the code inside the forloop to the following:

sensorType和sensor是select元素数组。select元素的当前选定值存储在其value. 将for循环内的代码更改为以下内容：

stCodegenerated += "Ain_Conf(" + iTemp + ", " + sensorType[i].value + ", AI_0" + iTemp + "); " 
        + sensor[i].value + " := AI_0" + iTemp + ";" + "<br><br>";

Then each time a user changes a state of an element, you will get something like this:

然后每次用户更改元素的状态时，您将得到如下内容：

Ain_Conf(1, 2, AI_01); oatp_ai := AI_01;

Hope this will help

希望这会有所帮助