VanCityCanuck Posted February 11, 2013 Share Posted February 11, 2013 (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 February 11, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
jeffman Posted February 11, 2013 Share Posted February 11, 2013 (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 February 11, 2013 by Deirdre's Dad Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 11, 2013 Author Share Posted February 11, 2013 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 More sharing options...
thescientist Posted February 11, 2013 Share Posted February 11, 2013 which part? you asked a lot of questions. which ones are you still having trouble with? all of them? Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 11, 2013 Author Share Posted February 11, 2013 (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 February 11, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
thescientist Posted February 11, 2013 Share Posted February 11, 2013 Im wondering how I would attatch each picture to the specific planetyou 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 pagebreak 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 More sharing options...
VanCityCanuck Posted February 11, 2013 Author Share Posted February 11, 2013 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 More sharing options...
justsomeguy Posted February 12, 2013 Share Posted February 12, 2013 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 More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 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) Is that right for the random element? Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 I think I understand everything now except I am still confused about how to call the random number and use only the info from that planet. I really appreciate everyone's help its been a huge help Link to comment Share on other sites More sharing options...
justsomeguy Posted February 12, 2013 Share Posted February 12, 2013 Your function will return the item from the array, you can just access the properties of the item that you've defined. Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 When it returns it shows each planet instead of just the one from the random number. sorry if im being dumb, im just confused about how to call just the random number. Link to comment Share on other sites More sharing options...
thescientist Posted February 12, 2013 Share Posted February 12, 2013 (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 February 12, 2013 by thescientist Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 Yes in my console it returns random planets.What might i be doing wrong? Sorry I feel like im being a bother but how do I limit what shows up on the page to just the arandomPlanet variable. Feel like pulling my hair out because I cant figure this out Link to comment Share on other sites More sharing options...
justsomeguy Posted February 12, 2013 Share Posted February 12, 2013 I'm not sure what you're missing, what code are you using now? Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 (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? Edited February 12, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
thescientist Posted February 12, 2013 Share Posted February 12, 2013 are you trying to show the list of planets and the random one? What are you looping through the list for? Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 Im trying to show just the random planet. Sorry I dont know why thats there I was just trying what I know to see if it would work. As if its not obvious but I am very new to this Link to comment Share on other sites More sharing options...
thescientist Posted February 12, 2013 Share Posted February 12, 2013 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 More sharing options...
VanCityCanuck Posted February 12, 2013 Author Share Posted February 12, 2013 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 More sharing options...
VanCityCanuck Posted February 13, 2013 Author Share Posted February 13, 2013 (edited) Or can I just put the height and width with the img tag in csa I figured that out Edited February 13, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
VanCityCanuck Posted February 13, 2013 Author Share Posted February 13, 2013 (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 February 13, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
thescientist Posted February 13, 2013 Share Posted February 13, 2013 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 doconsole.log("something here. a variable, a string, anything"); Link to comment Share on other sites More sharing options...
thescientist Posted February 13, 2013 Share Posted February 13, 2013 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 More sharing options...
VanCityCanuck Posted February 13, 2013 Author Share Posted February 13, 2013 (edited) Okay one last thing. my "57.9(10<sup>6</sup>) Km" shows up exactly like that on my page instead of as superscript. Is there any way to change this? Edited February 13, 2013 by VanCityCanuck Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now