How to display an array value based on a selection from a select option box?

Question

<!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>

Any help or points in the right direction is appreciated

I'm trying to make a page that a user selects a option from the dropdown and an array value is then shown based on the user's selection. I can't figure out how to access the array value based on the user selection. I can only use HTML and Script so no answers with jQuery please.

castletheperson · Accepted Answer · 2016-08-03 19:18:16Z

2

This line seems to be problematic (var n =parseInt(x) -1;), as you are using x before you defined it. You could just move that declaration below your var x declaration, or get rid of it altogether:

<!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>

edited Aug 3, 2016 at 19:18

castletheperson

33.7k11 gold badges74 silver badges111 bronze badges

answered Aug 3, 2016 at 19:01

Rob M.

36.6k6 gold badges56 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

castletheperson Over a year ago

It's worth noting that the reason this didn't throw an error was because of hoisting.

Ryan Stav Over a year ago

How can I also have a div display and the picture display once I select an option? forgot to add that but it does work :)

castletheperson Over a year ago

@RyanStav Use onchange on the <select>

David Florez · Accepted Answer · 2016-08-03 20:17:42Z

1

This is rare, apparently your code is ok but there is a difference between the id you are giving to your image element and the one on your document.getElementById both seems the same to me but when i copy and paste the id from the image to the document.getElementById() it works perfect.

edited Aug 3, 2016 at 20:17

answered Aug 3, 2016 at 19:27

David Florez

1,4362 gold badges14 silver badges27 bronze badges

Comments

Rudresh Ajgaonkar · Accepted Answer · 2016-08-03 19:18:26Z

<!DOCTYPE html>
<html>
<body bgcolor="#999966">
<form>
 <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"];
     x = document.getElementById("myFruitSelect").value;
     //This will give you index of the selected option.
     //As the array starts from 0 , we need to subtract 1 to access the particular picture
     y = parseInt(x);
     m = y-1;
     console.log(pictures[m]);
    document.getElementById('outputImage').setAttribute("src", pictures[m]);

    }
</script>

</body>
</html>

Collectives™ on Stack Overflow

How to display an array value based on a selection from a select option box?

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related