Wie wird ein Array-Wert basierend auf einer Auswahl aus einem Auswahlfeld angezeigt?

<!DOCTYPE html> 
<html> 
<body bgcolor="#999966"> 
<select id="myFruitSelect"> 
    <option value="0"> Please Choose a Fruit </option> 
    <option value="1"> Apple</option> 
    <option value="2">Orange</option> 
    <option value="3">Pineapple</option> 
    <option value="4">Banana</option> 
    <option value="5"> Watermelon </option> 
    </select> 
</form> 
<br> 
<button onclick="myFunction()"> Select Your Fruit</button> 
<img id="outputImage" src=""/> 

<script> 
function myFunction() { 
    var n =parseInt(x) -1; 
    var pictures=[ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"]; 
    var x = document.getElementById("myFruitSelect").value; 
    document.getElementById('outputImage').src = pictures[n-1]; 
} 
</script> 
</body> 
</html>

Jede Hilfe oder Punkte in die richtige RichtungWie wird ein Array-Wert basierend auf einer Auswahl aus einem Auswahlfeld angezeigt?

geschätzt

Ich versuche, eine Seite zu machen, dass ein Benutzer basiert auf der Auswahl des Benutzers dann gezeigt, um eine Option aus dem Drop-Down und einem Array-Wert wählt. Ich kann nicht herausfinden, wie man auf den Array-Wert basierend auf der Benutzerauswahl zugreift. Ich kann nur HTML und Script verwenden also keine Antworten mit jQuery bitte.

Quelle

2016-08-03 Ryan Stav

Diese Zeile scheint problematisch zu sein (var n =parseInt(x) -1;), wie Sie x verwenden, bevor Sie es definiert haben. Sie könnten nur diese Erklärung unten Ihre var x Erklärung bewegen, oder sie gänzlich loszuwerden:

<!DOCTYPE html> 
 
<html> 
 
<body bgcolor="#999966"> 
 
<select id="myFruitSelect"> 
 
    <option value="0"> Please Choose a Fruit </option> 
 
    <option value="1"> Apple</option> 
 
    <option value="2">Orange</option> 
 
    <option value="3">Pineapple</option> 
 
    <option value="4">Banana</option> 
 
    <option value="5"> Watermelon </option> 
 
    </select> 
 
</form> 
 
<br> 
 
<button onclick="myFunction()"> Select Your Fruit</button> 
 
<img id="outputImage" src=""/> 
 

 
<script> 
 
function myFunction() { 
 
    var pictures= [ "apple.png", "orange.png", "pineapple.png", "banana.png", "Watermelon.png"]; 
 
    var x = document.getElementById("myFruitSelect").value; 
 
    document.getElementById('outputImage').src = pictures[parseInt(x, 10)-1]; 
 
} 
 
</script> 
 
</body> 
 
</html>

Quelle

2016-08-03 19:01:47

Es ist erwähnenswert, dass der Grund, warum dies keinen Fehler verursacht hat, auf [histing] zurückzuführen ist (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/var#var_hoisting). – 4castle

Wie kann ich auch ein Div-Display haben und das Bild anzeigen, wenn ich eine Option auswähle? vergessen, das hinzuzufügen, aber es funktioniert :) –

@RyanStav Verwenden Sie 'onchange' auf der'