Javascript function define

Question

I'm currently new to javascript programming. And I have a question about function. When I tried to modify html DOM. I could either use function or no function.

The function one is as below:

<button type="button" onclick="myFunction()">Click Me!</button>

<p id="demo">This is a demonstration.</p>

<script>
function myFunction() { 
document.getElementById("demo").innerHTML = "Hello";
}

And the no function one is here:

<p id="demo">This is a demonstration.</p>
<button type="button" onclick= "getElementById('demo').innerHTML= 'Hello'">Click Me!             </button>

My question is :Why there it is document.getElementById()... in function case , but getElementById() in non function case? What's the document. for?

Thanks!!

Answer 1

What's the document. for?

To access the document object , where the getElementById method resides.

Why there it is document.getElementById()... in function case , but getElementById() in non function case?

It should always be there. In the inline event handler case, it can be omitted however (which is considered bad practise, though).