Question:
I have been stuck with the ‘Bonus’ portion in the attached photo. (IDK if the photo is actually able to upload so I copy and pasted code from Sublimetext)
The only hint I’m given is document.body.innerHTML
I have Googled and watched many YT videos, but found none of it helpful.
I personally would like someone to simply solve the bonus portion… but then tell me why you have that answer. I would like to know the thought process and overall just to break down what is .innerHTML and how to properly use it.
(function(){
"use strict";
var planetsString = "Mercury|Venus|Earth|Mars|Jupiter|Saturn|Uranus|Neptune";
var planetsArray;
// TODO: Convert planetsString to an array, save it to planetsArray.
var planetsArray = planetsString.split('|');
console.log(planetsArray);
// TODO: Create a string with <br> tags between each planet. console.log() your results.
console.log(planetsArray.join("<br>"));
console.log(planetsArray);
// Bonus: Create a second string that would display your planets in an undordered list.
// Why might this be useful?
})();
// definitely lost in the sauce on this one. Would like to request assistance .
// You will need an opening AND closing <ul> tags around the entire string, and <li> tags around each planet.
// console.log() your results.
Hello, @SethChristopher! innerHTML is the HTML inside an element.
So document.body.innerHTML is all the elements that make up a website.
So if you do this in js: document.body.innerHTML = '<p>Hello!</p>' will replace the contents of the website with <p>Hello!</p>.
You need to append your planets to an unordered list first. Try the following code, which should display every planet in an unordered list. Because I don’t believe it is possible to write HTML elements to the JavaScript console, you will write your element to the DOM using document.body.innerHTML. (I might have made a mistake because I wrote this quickly, please correct me if something is wrong)
(function(){
"use strict";
var planetsString = "Mercury|Venus|Earth|Mars|Jupiter|Saturn|Uranus|Neptune";
var planetsArray = planetsString.split('|');
let unorderedList = document.createElement("ul");
planetsArray.forEach((planet) => {
let listItem = document.createElement("li");
listItem.textContent = planet;
unorderedList.appendChild(listItem);
});
document.body.innerHTML = unorderedList;
})();
@ bobastley
Thank you so very much!
I am curious though if there is any reading material you could possibly point me in the direction of, that would better help me understand this specific question. Again, HUGE thanks for your assistance and time.
No problem! I’ve been pretty inactive on Ask recently so I decided to help somebody out.
I’m not proud of the way I learned, it was a mix of random YouTube tutorials, unfinished boot camps, and StackOverflow answers. I’m a long way away from becoming a good JavaScript developer, but I would highly recommend looking on W3Schools and the MDN Web Docs if you want to learn a new skill or brush up on some old ones. As far as learning content, I don’t really have many recommendations, but something interactive is definitely the best way to go.
