HTML Display info in a select option from an array?

Question

Just a heads up, I'm pretty new to coding and am doing simple assignments for my schooling. So take it easy on me please. :-)

So one of my problems is to create a webpage with an array holding all the planet names. I did that fairly easily.

<script>
var planets = ["Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];
</script>

So far, so good. The next step asks to use the array to display the names of the planet in a select object. I also managed to get this to work, though it took a little bit of messing around.

Planets
<select id="planetSelect">
    <script>
        for (var p = 0; p < 9; ++p) {
            document.write("<option value='p'>");
            document.write(planets[p]);
            document.write("</option>");
        }
    </script>
</select>

Got it. Now my page displays a little drop-down menu with all the planet names... Now the last step is to have the web page display the amount of moons and gravitational factor of the planets when selected in the drop down. (This info can be easily googled, not the issue I'm having.) I'm not sure how to tie the info to the drop-down selection/array properly and have it display. At a loss of how to get this started and going. Any help is appreciated! :-)

Julian Espinosa · Accepted Answer · 2018-12-13 16:46:13Z

You can separate your JS into another file and populate the <select> element with the <option> tag by dynamically creating it. Then when that <select> element changes you can trigger a set of conditions and write it to the <h1> for this example I just added information for Mars and Earth. Hope this helps and gets you going. Fiddle

var planets = ["-", "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn", "Uranus", "Neptune", "Pluto"];
//Get the <select> element
selectElement = document.getElementById("planetSelect");

//Dynamically populate the select element with the option
for(var i=0; i<planets.length; i++){
	option = document.createElement("option");
  selectElement.append(option);
  option.setAttribute("value", planets[i]);
  option.innerText =planets[i];
}

//When the <select> element changes it will trigger a condition
//if it matches it will display the information in the <h1>
selectElement.onchange = function(){
//This will get the value of the selected option
  item = selectElement.options[selectElement.selectedIndex].value;
  moonData = document.getElementById("moonCount");

  if(item == "Mars"){
    moonData.innerHTML = "Mars has 2 moons.";
  }
  if(item == "Earth"){
    moonData.innerHTML = "Earth has 1 moons.";
  }

}

<select id="planetSelect">

</select>

<h1 id="moonCount">
  
</h1>

fig · Accepted Answer · 2018-12-13 16:25:44Z

0

One thing you could try is making two parallel arrays with the moons and gravitational factors. Then you could do: document.write(moons[p]); document.write(gravity[p]); when one is selected.

answered Dec 13, 2018 at 16:25

fig

3842 silver badges11 bronze badges

Comments

Xion · Accepted Answer · 2018-12-13 16:25:57Z

0

Create the body and link it to the drop down menu you have created. It should not affect how the script works, I suggest checking out w3-school as they have great information on drop down menu display

answered Dec 13, 2018 at 16:25

Xion

3742 silver badges7 bronze badges

Collectives™ on Stack Overflow

HTML Display info in a select option from an array?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related