JavaScript-HTML-Objekt HTMLSelectElement
Ich versuche, erstellen Sie eine kleine HTML-Formular, wo meine Nutzer benötigen, um Optionen zu wählen aus Checkboxen und dropdown-Listen. Das beabsichtigte Ergebnis ist ein text, der dynamisch generiert wird, wie die Benutzer ändern Ihre Entscheidungen.
Die Idee funktioniert, aber ich bekomme immer "[object HTMLSelectElement]" anstatt den Wert des ausgewählten Auswahl aus der dropdown-box. Wenn einer von Euch Veteranen JavaScript-Programmierer könnte geben Sie mir Ihre Meinung, ich würde es sehr zu schätzen! Ich verbrachte einige Zeit doppelt alles überprüfen und ich bin mir ziemlich sicher, dass mein code korrekt syntaktisch aber ich konnte völlig falsch, ohne es zu merken. Ich bin neu in JavaScript bin ich also noch in einer Lernphase.
HTML-Code:
<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:
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/
- Wenn Sie den Wert eines Elements
.value
zu erhalten die Wert
Du musst angemeldet sein, um einen Kommentar abzugeben.
Es ist, weil Sie verwenden müssen
.value
Eigenschaft vonHTMLElement
.Beispiel unten:
Und so weiter.
Beachten Sie, dass
value
funktioniert nur mit ein, wenn Sie wollen, um den Inhalt eines Tags, die Sie verwenden sollteninnerHTML
.BEARBEITEN:
Ich bearbeitet Ihren code, jetzt funktioniert es auch(es war ein
var
bevor er erklärtei
in der for-Schleife, die Probleme verursachen können) und dies ist die aktualisierte JSFiddlesensorType
undsensor
sind arrays vonselect
Elemente. Ist der aktuell ausgewählte Wert einerselect
element gespeichert ist in Ihrervalue
. Ändern Sie den code in dasfor
- Schleife um die folgenden:Dann jedes mal, wenn ein Benutzer ändert ein Staat von einem element, erhalten Sie so etwas wie dieses:
Hoffe das hilft