Console.log() OR getDocumentbyID in Javascript?
This this beginner-level Javascript Exercise, I find 2 possible solutions for (see code below):
- console.log();
- document.getElementById("valueID").innerHTML = variablename;
What is the difference between printing the solution out in the console (F12) or via the DOM? I understand that the console.log();is strictly for internal testing (for developers). But when should I use the "document.getElementByID", is that for DOM manipulation? And are there any other differences between these two, in terms of performance?
Thanks. Here is my code:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Introduction</title> </head> <body> <h1>Introduction</h1> <p id="Name"></p> <p id="Surname"></p> <p id="Age"></p> <script> let name = prompt("Introduce your name: "); let surname = prompt("Introduce your surname: "); let age = prompt("Introduce your age: "); //TO PRINT OUT IN CONSOLE console.log(name + " " + surname + " " + age); document.getElementById("Name").innerHTML = name; document.getElementById("Surname").innerHTML = surname; document.getElementById("Age").innerHTML = age; </script> </body> </html> 
Console.log as you said is use for the development , to check our variables’ values but it has no impact on the DOM (page).
document.getElementById thing will change directly the DOM which allows you to change the actual page and values of elements you decided.
Hope it helps you 🙂
The console.log() is a function that writes a message to log on the debugging console, such as Webkit or Firebug. In a browser you will not see anything on the screen. It logs a message to a debugging console. It’s not a jQuery feature but a feature for debugging purposes. You can for instance log something to the console when something happens.
The document.getElementById() method returns the element that has the ID attribute with the specified value. And the innerHTML change the value of that specific element of mentioned ID.
document.getElementById() modifies the DOM, but console.log() does not read/ write/ modify/ update the DOM
I use the console.log if I want to check if something is working. Sometimes my function is working but the translation into the DOM is not working.
If I would use the getElementById, I would not see if my function is working or if my DOM manipulation is working..
Hopefully this helps a little, I’m just a beginner 🙂
