2017-02-23 1 views
1

Ich versuche, die onChange Funktion zu lernen. Ich nahm diesen Code und implementierte es auf meiner Website und es funktioniert, es zeigt tatsächlich den Wert von dem, was der Benutzer gewählt hat, aber wenn ich versuche, die Variable in Chrom zu loggen, heißt es: Uncaught ReferenceError: x is not defined. Warum das? Warum ist die Variable nicht definiert, nachdem ich ein Auto gewählt habe? Und noch eine Frage. Ist das Javascript oder Jquery?Speichern der ausgewählten Option als Javascript Variable

Der CODE

<!DOCTYPE html> 
<html> 
<body> 

<p>Select a new car from the list.</p> 

<select id="mySelect" onchange="myFunction()"> 
    <option value="Audi">Audi 
    <option value="BMW">BMW 
    <option value="Mercedes">Mercedes 
    <option value="Volvo">Volvo 
</select> 

<p>When you select a new car, a function is triggered which outputs the value of the selected car.</p> 

<p id="demo"></p> 

<script> 
function myFunction() { 
    var x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
} 
</script> 

</body> 
</html> 
+0

Nicht Teil Ihrer Frage von Ihren Optionen haben keine Schließung des Tags: '' –

Antwort

2

Dies ist das JavaScript von Ihrem Beitrag.

Wenn Sie dies tun:

function myFunction() { 
    var x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
    console.log("x:",x); 
} 

x im Rahmen der Funktion ist und somit zur Verfügung steht.

Es ist generell eine schlechte Übung, solche Variablen im globalen Gültigkeitsbereich zu definieren.

var x = {}; 
function myFunction() { 
    x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
} 
myfunction();// call it 
console.log("x:",x); 

Ausführlich Version davon: (im Grunde die gleichen, aber expliziten window auf den Objekten) Hinweis I hinzugefügt, wie Sie den gewählten Wert zu erhalten.

window.x = {}; 

function myFunction() { 
    window.console.log("in here"); 
    var selectElem = document.getElementById("mySelect"); 
    var optsCount = selectElem.options.length; 
    var index = selectElem.selectedIndex; 
    window.console.log("opts", optsCount, index); 
    // return the value of the selected option 
    window.console.log(selectElem.options[selectElem.selectedIndex].value) 
    window.x = selectElem.options[selectElem.selectedIndex].value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
} 
window.myFunction(); // call it 
window.console.log("x:", window.x); 

Hier ist eine Geige des letzten Beispiel: https://jsfiddle.net/MarkSchultheiss/bqwd784p/

Nein hier jQuery nur JavaScript.

+0

Vielen Dank für die beschreibende Antwort. Ich lerne viel und habe es geschafft :-) –

2

Ihre Variablen deklarieren und im Funktionsumfang zugeordnet sind. Wenn Sie es auch außerhalb des Funktionsumfangs wollen, müssen Sie es außerhalb der Funktion

<script> 
var x; 
function myFunction() { 
    x = document.getElementById("mySelect").value; 
    document.getElementById("demo").innerHTML = "You selected: " + x; 
} 
</script> 

erklären, wird es nicht definiert werden, bis die Funktion ausgelöst wird. Dies ist plain vanilla JS mit der DOM API.

+0

Ich werde das versuchen. Vielen Dank. –

+0

@KakiSami Optional können Sie es global innerhalb der Funktion mit 'window.x = document.getElementById (" mySelect "). Value'; – Bright

+0

Vielen Dank für die Antwort. Ich habe es im Flug deklariert und es wurde dann global. "format = document.getElementById (" format "). value" –

Verwandte Themen