document.getElementById() & innerHTML

Thanks for you answers. I'm sorry, i was away from my PC for some time so I couldn't follow up with my the thread.

So, if I'm to get my understanding rephrased, the document.getElementById() simply manipulates the HTML by using the structure (element) of the specified HTML id to run the argument passed to it by the coder. This structure maybe font color or something else.

Secondly, using my above quiz solution as a reference, does the document.getElementById() make any visible changes to the code when it's previewed because I didn't notice any difference even when the print function was using the document.write method because the code still ran either way?

Hi there! I don't know how else to say it really, other than document.getElementById returns the element with that ID. In this case, we had a div with that ID. If it'd been a paragrph, it would have returned that paragraph with that id. Getting the element by ID doesn't in and of itself manipulate the HTML, but only selects part of the HTML.

As for your second point, it would depend on where you were using the document.write. If the document.write didn't specify where it would be written then it would inherit the style of the body. By using this, you say to put all the list items and ordered lists in the output div. If your body had a background color of white and black text, then your items would be in black on a white background. But if your output div had a background of red and had white text and you told it to select the output div and write there, then your lists would be in something with a red background and be printed in white text.

You might consider going into the CSS and changing the output div to have exactly those rules with a red background and white text. Try again with your document.write and try this solution again. If there are any differences it should be immediately visible.

On a side note, after looking at your profile, I notice that you have not taken any HTML nor CSS courses. Much of JavaScript is about manipulating HTML and CSS. This is going to be infinitely easier to understand if you have a very solid understanding of HTML and CSS.

Just to be clear, document.getElementById() does not manipulate the HTML or make any visible changes to the code by itself. All it does is give you a reference that other code can use to examine and/or modify the page.

On the other hand, document.write() puts new content onto the page.

So Steven Parker what it actually does is that it 'fetches' the elements i.e font color, size etc of the id we referenced from the HTML and this element will modify the argument we pass through it in our code. So our argument will have the same element such as the id in the HTML?

It might be more correct to say that it fetches a reference to the element. This reference can then be used by later code to access the properties of that element that affect things like color and size. And yes, the argument to getElementById is a string containing the same value as the ID property (as given in the HTML) of the element you want to work with.

I appreciate your help Steve, I think i now get some part of it . Will check other sources to get more or rather will fully understand it when i go through the CSS and HTML courses

I think Steven and Jennifer have you covered pretty well for the explanation of what's going on, but I do have some advice. If I were you, I would drop the JavaScript courses right now and learn HTML and CSS if you don't know them already. JavaScript was made to manipulate HTML and CSS, so if you're not familiar with them, you're gonna get lost pretty frequently with front-end JavaScript

I also agree that you might benefit from taking the courses in a different order. I recommend the Front End Web Development track, which will eventually get back to the course you're doing now.

I'm so sorry if i'm giving you a had time, maybe something got wrong along the way. I was actually referring to the "Build a quiz challenge solution part 2" by Dave and here's the link. I'm going to post my own solution of the challenge next for better understanding of the question https://teamtreehouse.com/library/javascript-loops-arrays-and-objects/tracking-multiple-items-with-arrays/build-a-quiz-challenge-part-2-solution

I'm was asking about the use and impact of the getElementById() introduced by Dave in the print function here

function print(message)
var outputDiv = document.getElementById('output');
outputDiv.innerHTML += message

Here is my own solution for the challenge for better reference

function print(message) {
  var outputDiv = document.getElementById('output');
  outputDiv.innerHTML += message;
}
function buildList(array) {
  var htmlList = '<ol>';
  for(var q = 0; q < array.length; q += 1) {
    htmlList += '<li>' + array[q] + '</li>';
  }
  htmlList += '</ol>';
  return htmlList;
}
var html;
var count = 0;
var questions = [
 ['What letter is the first alphabet?', ' a'],
 ['Who won the last world cup?', 'germany'],
 ['What is the capital of germany?', 'berlin']
];
var correctAnswer = [];
var wrongAnswer = [];
for (var i = 0; i < questions.length; i +=1) {
  var userInput = prompt(questions[i][0]);
  if(questions[i][1].indexOf(userInput.toLowerCase() ) > -1) {
    correctAnswer.push(questions[i][0]);// trying to push the correct input into the correctAnswer array//
    count+=1;
    print
  } else {
    wrongAnswer.push(questions[i][0]);// trying to apply the same with line 16 but this time in the wrongAnswer array//
  }
  html = 'You got ' + count + ' question(s) correctly out of 3';
}
print(html);
print('<h2>You got these question(s) correct ;</h2>');
print(buildList(correctAnswer) );// to print out the correctAnswer to the page with each of them numbered//
print('<h2>You got these question(s) wrong ;</h2>');
print(buildList(wrongAnswer) );//same with line 22//

Hi again! Your solution also uses the getElementById and also works. Again, this is specifying where we should add the ordered lists. Imagine for a moment that you had not one, but three divs and all three of them have different sets of CSS rules.

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>

If you did getElementById and then used the innerHTML property on that and set it equal to "Hello there, Enemuo", you would get that text inside the second div. Maybe the divs have some font-color rules like this:

#div1 {
  font-color: black;
}

#div2 {
  font-color: red;
}

#div3 {
  font-color: black;
}

Because you've chosen to write your text inside the div with the id of "div2", all of the text there will be red. You could do a document.write() without specifying where to write it, but then it will inherit the CSS styles for the body.

Does this help?

Thank you so much Jennifer, I really understand you totally, I think I have problem summarizing my understanding to you. I think i'm mixing up the programming terms(maybe because i'm new to this) .

However, I know it would have been easier for me to understand if i had taken the CSS and HTML courses before humping onto Js. But I have already started Js before I knew about the order, so i figured I should do those after this. I hope the whole thing won't blow up in my face? Thank you once again for your patience

Hi there! Unfortunately, I still don't know what you mean by "element method". What I can say is that document.getElementById() does not appear anywhere in Dave's code in this video. There is, however, the print function which simply writes the result to the document without specifying where. In the solution here, there were no <ol> or <li> tags.

My explanation had nothing to do with CSS styles. What I was trying to get across was that the getElementById was going to tell it where in the document to write the information.

I feel like I need to know exactly which bit of code you're referring to. I sincerely want to help, but I'm still confused as to what you're asking. I think you might be referring to the unordered list and list items that he adds to the page in the second solution. Keep in mind that before the print(message) happens the ordered list and list items don't exist in the index.html. He uses a function called buildList to build up a string that contains an ordered list and list items. He thien sends this string to the print function which places 2 ordered lists onto the index.html. These of course, get any styles applied by the CSS.

Please know if I can help further or provide specific code that I can address, because unfortunately, I'm still not entirely clear on what you are asking.