CODEWITHSUNDEEP
htmlcss
Tyler Brown
Tyler Brown

Reputation: 3

HTML Display info in a select option from an array?

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

Upvotes: 0

Views: 183

Answers (3)

Julian Espinosa
Julian Espinosa

Reputation: 712

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>

Upvotes: 1

Xion
Xion

Reputation: 374

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

Upvotes: 0

fig
fig

Reputation: 384

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.

Upvotes: 0

Related Questions