Jump to content

Need help with my array

VanCityCanuck

By VanCityCanuck
in JavaScript

 Share

Recommended Posts

VanCityCanuck Newbie

VanCityCanuck

Posted
Posted (edited)

Hey everyone, Im trying to add images to each element in my array but I can not find an answer on how to do this. Could anyone point me in the right direction? Im also trying to output my randomPlanet function to a section on my page but I also cant figure out how to do that. Any help is appreciated! Thank you Here is my code, sorry if its a little messy <!DOCTYPE html><html><head><meta charset="UTF-8" /> </head><body> <section><header id="studentInfo"> </header></section><section id="planets"><p id="planetsTitle">Planets in order of closest <br> to furthest from the sun:</p><ul id ="planetsList"><li>Mercury </li> <li>Venus</li> <li>Earth</li> <li>Mars</li> <li>Jupiter</li> <li>Saturn</li> <li>Uranus</li> <li>Neptune</li></ul></section><section id="randoPlanet"> </section><script> var list = [{"name":"Mercury","distance":"57.9(10<sup>6</sup>) Km","temperature":"167","moons":"0",},{"name":"Venus","distance":"108.2(10<sup>6</sup>) Km","temperature":"464","moons":"0"},{"name":"Earth","distance":"149.6(10<sup>6</sup>) Km","temperature":"15","moons":"1"},{"name":"Mars","distance":"227.9(10<sup>6</sup>) Km","temperature":"-65","moons":"2"},{"name":"Jupiter","distance":"778.6(10<sup>6</sup>) Km","temperature":"-110","moons":"67"},{"name":"Saturn","distance":"1433.5(10<sup>6</sup>) Km","temperature":"-140","moons":"62"},{"name":"Uranus","distance":"2872.5(10<sup>6</sup>) Km","temperature":"-195","moons":"27"},{"name":"Neptune","distance":"4495.1(10<sup>6</sup>) Km","temperature":"-200","moons":"13"} ] var displayArea = document.getElementById("randoPlanet");displayArea.style.fontSize = "16pt"; for (var i=0; i<randomPlanet.length; i++) {displayArea.innerHTML += list.name +" is " + list.distance +" from the sun " +"<br />";} listSection = document.createElement("section");listSection.id = "randomPlanet"; for (var i=0; i<list.length; i++) {var heading = document.createElement("h2");var headingText = document.createTextNode(list.name);heading.appendChild(headingText);heading.className = "listHeading";listSection.appendChild(heading); var distancePlanet = document.createElement("section")var distanceNum = document.createTextNode(list.name + " is " + list.distance + " from the sun ");distancePlanet.appendChild(distanceNum);distancePlanet.className = "distance";listSection.appendChild(distancePlanet); } function randomPlanet(listParameter) {var randomNumber = Math.random() * listParameter.length;var randomInt = Math.floor(randomNumber);var randomItem = listParameter[randomInt];console.log(randomInt);return randomItem;}console.log(randomPlanet (list)); </script></body> </html>

Edited by VanCityCanuck
Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted (edited)

I see nothing wrong with your array. I do notice that you have a function called randomPlanet and that you try to access the length property of an undefined object called randomPlanet. Can't have both.

Edited by Deirdre's Dad
Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted

Hey thanks for your help, I have changed it now. What im trying to do is use randomPlanet function, which ever planet it picks in the array, and then output that to a section on the page. I also need to add pictures to each planet, could you point me in the right direction on how to do this? Thanks again

Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted (edited)

Yeah both. I have a folder with seperate pictures for each planet. Im wondering how I would attatch each picture to the specific planet and how to output whatever random number is called from the array to a section on the page Thanks in advance

Edited by VanCityCanuck
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Im wondering how I would attatch each picture to the specific planet
you already have an array of objects, one for each planet. create an additional property for each one that you can use to store the path to the image. then use that path to change the source of an image element on the page
and how to output whatever random number is called from the array to a section on the page
break it down into steps. 1) designate specific DOM elements to contain each bit of information you want, and give it an ID (i.e. an element for name, distance, image, etc) for the random planet you will pick2) have an event handler that* generate a random number from 0 to the length of your array - 1* uses that as index to get reference that element of the array* assign the values of each property to its respective DOM element Note: before you start, find the console for your browser. google it first if you need to. Keep it open, and only go onto the next step from the current step if everything is working as you expect and you don't see any errors. make liberal use of console.log("something here") to debug your code as you go to take as much guess work out of the process as possible.
Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted

Hey is this more of what I want to do with respect to the pictures? var list = [{"name":"Mercury","distance":"57.9(10<sup>6</sup>) Km","temperature":"167","moons":"0","picture":"/planets/mercury.jpg"},{"name":"Venus","distance":"108.2(10<sup>6</sup>) Km","temperature":"464","moons":"0","picture":"/planets/venus.jpg"},{"name":"Earth","distance":"149.6(10<sup>6</sup>) Km","temperature":"15","moons":"1","picture":"/planets/earth.jpg"}, I have a function that picks a random number and displays in on the console, is that what you meant with console.log("something here")? Im just having trouble being able to link the random number to putting it on the page Thanks again for all the help

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

If your random number is within the range of your array, then you can access list[random_number] to get the random element. You'll need to generate a random integer between 0 and list.length - 1 for that to work. The picture looks fine, just make sure it's the right URL. You can set an img src to list.picture, for example.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted (edited)

make sure you are using (and logging) the correct value. call the function, then try logging the return value.

var aRandomPlanet = randomPlanet(list);console.log(aRandomPlanet);

Edited by thescientist
Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted (edited) 
<!DOCTYPE html><html><head>  <meta charset="UTF-8" /></head><body>  <section>   <header>   </header>  </section>  <div id="planets">  <p id="planetsTitle">Planets in order of closest <br> to furthest from the sun:</p>   <ul id ="planetsList">	<li>Mercury </li>  	<li>Venus</li>	<li>Earth</li>	<li>Mars</li>	<li>Jupiter</li>		<li>Saturn</li>  	<li>Uranus</li>  	<li>Neptune</li>   </ul>  </div>  <div onload="aRandomPlanet" id="randoPlanet">  <img id="plntPic"/> 	 </div>  <script>    var list = [	 {"name":"Mercury",	 "distance":"57.9(10<sup>6</sup>) Km",	 "temperature":"167",	 "moons":"0",	 "picture":"/planets/mercury.JPG"},	 {"name":"Venus",	 "distance":"108.2(10<sup>6</sup>) Km",	 "temperature":"464",	 "moons":"0",	 "picture":"/planets/venus.JPG"},	 {"name":"Earth",	 "distance":"149.6(10<sup>6</sup>) Km",	 "temperature":"15",	 "moons":"1",	 "picture":"/planets/earth.JPG"},	 {"name":"Mars",	 "distance":"227.9(10<sup>6</sup>) Km",	 "temperature":"-65",	 "moons":"2",	 "picture":"/planets/mars.JPG"},	 {"name":"Jupiter",	 "distance":"778.6(10<sup>6</sup>) Km",	 "temperature":"-110",	 "moons":"67",	 "picture":"/planets/jupiter.JPG"},	 {"name":"Saturn",	 "distance":"1433.5(10<sup>6</sup>) Km",	 "temperature":"-140",	 "moons":"62",	 "picture":"/planets/saturn.JPG"},	 {"name":"Uranus",	 "distance":"2872.5(10<sup>6</sup>) Km",	 "temperature":"-195",	 "moons":"27",	 "picture":"/planets/uranus.JPG"},	 {"name":"Neptune",	 "distance":"4495.1(10<sup>6</sup>) Km",	 "temperature":"-200",	 "moons":"13",	 "picture":"planets/neptune.JPG"}	   ]      for (var i=0; i<list.length; i++) {     var plnt = document.createElement("h2");   var plntTitle = document.createTextNode(list[i].name);   plnt.appendChild(plntTitle);   plnt.className="plntTitle"   randoPlanet.appendChild(plnt);     var plntDist = document.createElement("section");   var distFromSun = document.createTextNode(list[i].name + " is " + list[i].distance + " from the sun.")   plntDist.appendChild(distFromSun);   randoPlanet.appendChild(plntDist);    } function randomPlanet(listParameter) {  var randomNumber = Math.random() * listParameter.length;  var randomInt = Math.floor(randomNumber);  var randomItem = listParameter[randomInt];  console.log(randomInt);  return randomItem;  }  console.log(randomPlanet(list))   var aRandomPlanet = randomPlanet(list);   console.log(aRandomPlanet);     </script></body></html>

Is it bad that im nervous to even post my code? :fool:

Edited by VanCityCanuck
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

study this and ask as many questions as you need. im not sure what the full requirements were that you were asking, but you should be able to get what you need using this.

 <!DOCTYPE html><html>  <head>    <meta charset="UTF-8" />    <script>    var planetListOutputEle = {};    var randomPlanetOutputEle = {};     var planets = [      {"name":"Mercury",        "distance":"57.9(10<sup>6</sup>) Km",        "temperature":"167",        "moons":"0",        "picture":"/planets/mercury.JPG"},      {"name":"Venus",        "distance":"108.2(10<sup>6</sup>) Km",        "temperature":"464",        "moons":"0",        "picture":"/planets/venus.JPG"},      {"name":"Earth",        "distance":"149.6(10<sup>6</sup>) Km",        "temperature":"15",        "moons":"1",        "picture":"/planets/earth.JPG"},      {"name":"Mars",        "distance":"227.9(10<sup>6</sup>) Km",        "temperature":"-65",        "moons":"2",        "picture":"/planets/mars.JPG"},      {"name":"Jupiter",        "distance":"778.6(10<sup>6</sup>) Km",        "temperature":"-110",        "moons":"67",        "picture":"/planets/jupiter.JPG"},      {"name":"Saturn",        "distance":"1433.5(10<sup>6</sup>) Km",        "temperature":"-140",        "moons":"62",        "picture":"/planets/saturn.JPG"},      {"name":"Uranus",        "distance":"2872.5(10<sup>6</sup>) Km",        "temperature":"-195",        "moons":"27",        "picture":"/planets/uranus.JPG"},      {"name":"Neptune",        "distance":"4495.1(10<sup>6</sup>) Km",        "temperature":"-200",        "moons":"13",        "picture":"/planets/neptune.JPG"}    ]     var createPlanetEle = function(planet){      var planetEleContainer = document.createElement("div");      var planetTitleEle = document.createElement("h2");      var planetDistEle = document.createElement("section");      var distFromSun = document.createTextNode(planet.name + " is " + planet.distance + " from the sun.");      var planetImageEle = document.createElement("img");      var title = document.createTextNode(planet.name);       planetTitleEle.appendChild(title);      planetDistEle.appendChild(distFromSun);       planetImageEle.src = planet.picture;      planetImageEle.alt = title;       planetEleContainer.appendChild(planetTitleEle);      planetEleContainer.appendChild(planetDistEle);      planetEleContainer.appendChild(planetImageEle);       return planetEleContainer;    }     var getRandomPlanet = function(list){      var randomNumber = Math.random() * list.length;      var randomInt = Math.floor(randomNumber);      var randomItem = list[randomInt];       return randomItem;    }     window.onload = function(){      //get DOM references      planetListOutputEle = document.getElementById("planetList");      randomPlanetOutputEle = document.getElementById("randomPlanet");       //display plaents      for (var i=0; i< planets.length; i++) {        var planetEle = createPlanetEle(planets[i]);         planetListOutputEle.appendChild(planetEle);      }       //get/append random planet      var randPlanet = getRandomPlanet(planets);      var randPlanetEle = createPlanetEle(randPlanet);      randomPlanetOutputEle.appendChild(randPlanetEle);    }    </script>  </head>  <body>    <section>      <header>      </header>    </section>     <div id="planets">      <p id="planetsTitle">Planets in order of closest <br> to furthest from the sun:</p>      <ul>        <li>Mercury </li>        <li>Venus</li>        <li>Earth</li>        <li>Mars</li>        <li>Jupiter</li>        <li>Saturn</li>        <li>Uranus</li>        <li>Neptune</li>      </ul>    </div>     <h1>List of Planets from Loop</h1>    <div id="planetList">    </div>     <h1>Random Planet</h1>    <div id="randomPlanet">    </div>   </body></html>

Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted

Wow! I can not express my thanks enough. This forum has been one of the most helpful Ive ever been in! Just one more question and I think thats it. How would I make the image show up in the top right corner? and can I size it so that everytime a picture comes up it is in the pre determined size?

Link to comment
Share on other sites
VanCityCanuck Newbie

VanCityCanuck

Posted
  • Author
Posted (edited)

Is there a way I can return the random planet to the console. The same planet that shows up on the page One thing I cant figure out though is Im trying to add text underneath the sentences. 

	var createPlanetEle = function(planet){	  var planetEleContainer = document.createElement("div");	  var planetTitleEle = document.createElement("h2");	  var planetDistEle = document.createElement("section");	  var distFromSun = document.createTextNode(planet.name + " is " + planet.distance + " from the sun.");      var meanTemp = document.createTextNode("The mean temperature of " + planet.name + " is " + planet.temperature + ".");      var numOfMoon = document.createTextNode(planet.name + " has " + planet.moons + " moons.");	  var planetImageEle = document.createElement("img");	  var title = document.createTextNode(planet.name); 	  planetTitleEle.appendChild(title);	  planetDistEle.appendChild(distFromSun); 	  planetImageEle.src = planet.picture;	  planetImageEle.alt = title; 	  planetEleContainer.appendChild(planetTitleEle);	  planetEleContainer.appendChild(planetDistEle);      planetEleContainer.appendChild(meanTemp);      planetEleContainer.appendChild(numOfMoon); 	  planetEleContainer.appendChild(planetImageEle);	  return planetEleContainer;	}

I added the meanTemp and it showed up underneath, but when I add numOfMoon it shows up beside meanTemp instead of underneath

Edited by VanCityCanuck
Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Is there a way I can return the random planet to the console. The same planet that shows up on the page?
im not sure what you mean by return to the console. to log to the console, simply do
console.log("something here.  a variable, a string, anything");

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Is there a way I can return the random planet to the console. The same planet that shows up on the page One thing I cant figure out though is Im trying to add text underneath the sentences. 
	var createPlanetEle = function(planet){	  var planetEleContainer = document.createElement("div");	  var planetTitleEle = document.createElement("h2");	  var planetDistEle = document.createElement("section");	  var distFromSun = document.createTextNode(planet.name + " is " + planet.distance + " from the sun.");   var meanTemp = document.createTextNode("The mean temperature of " + planet.name + " is " + planet.temperature + ".");   var numOfMoon = document.createTextNode(planet.name + " has " + planet.moons + " moons.");	  var planetImageEle = document.createElement("img");	  var title = document.createTextNode(planet.name); 	  planetTitleEle.appendChild(title);	  planetDistEle.appendChild(distFromSun); 	  planetImageEle.src = planet.picture;	  planetImageEle.alt = title; 	  planetEleContainer.appendChild(planetTitleEle);	  planetEleContainer.appendChild(planetDistEle);   planetEleContainer.appendChild(meanTemp);   planetEleContainer.appendChild(numOfMoon); 	  planetEleContainer.appendChild(planetImageEle);	  return planetEleContainer;	}

I added the meanTemp and it showed up underneath, but when I add numOfMoon it shows up beside meanTemp instead of underneath

most likely because you're appending meanTemp after you append planetDistEle, which is in a section tag. section is block level element, and when you add something after it, then it will start on a new line. However, meanTemp and numOfMoon are just text nodes, which will probably be represented as inline elements, so like inline elements, they will sit on the same line. You could make a <p> element for each piece of text you want, and they will always sit on a new line.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...