Use of document getElementById in JavaScript

Question

Can someone explain what the document getElementById  demo   line does in the example below   I understand getElementById gets the id of demo but the id is  lt p id  demo  gt  lt  p gt  What exactly is  lt p id  demo  gt  lt  p gt  doing in this code   document getElementById  age   is clear as it gets the id of age which is the input    x000D   x000D  function myFunction     x000D    var age voteable  x000D    age   document getElementById  age   value  x000D    voteable    age  lt  18    Too young     Old enough   x000D    document getElementById  demo   innerHTML   voteable  x000D    x000D   lt p gt Click the button to check the age  lt  p gt  x000D   x000D  Age  lt input id  age  value  18    gt  x000D   lt p gt Old enough to vote  lt  p gt  x000D   lt button onclick  myFunction    gt Try it lt  button gt  x000D   x000D   lt p id  demo  gt  lt  p gt  x000D   x000D   x000D

User · Answer

getElementById returns a reference to the element using its id  The element is the input in the first case and the paragraph in the second case   https   developer mozilla org en-US docs Web API document getElementById

User · Answer

Here in your code demo is id where you want to display your result after click event has occur and just nothing   You can take anything   lt p id  demo  gt    or    lt div id  demo  gt     It is just node in a document where you just want to display your result

User · Answer

the line  age document getElementById  age   value    says  the variable I called  age  has the value of the element with id  age   In this case the input field   The line  voteable  age lt 18   Too young   Old enough     says in a variable I called  voteable  I store the value following the rule     If age is under 18 then show  Too young  else show  Old enough    The last line tell to put the value of  voteable  in the element with id  demo   in this case the  p  element

User · Answer

It is just a selector that helps you select specific tag  lt p id    demo  gt  lt  p gt  elements which help you change the behavior  in any event  either mouse or keyboard

User · Answer

You re correct in that the document getElementById  demo   call gets you the element by the specified ID  But you have to look at the rest of the statement to figure out what exactly the code is doing with that element    innerHTML voteable    You can see here that it s setting the innerHTML of that element to the value of voteable

User · Answer

document getElementById  demo   innerHTML   voteable finds the element with the id demo and then places the voteable value into it  either too young or old enough    So effectively  lt p id  demo  gt  lt  p gt  becomes for example  lt p id  demo  gt Old Enough lt  p gt

User · Answer

Consider   var x   document getElementById  age      Here x is the element with id  age    Now look at the following line  var age   document getElementById  age   value    this means you are getting the value of the element which has id  age

[javascript] Use of document.getElementById in JavaScript

Examples related to javascript

Examples related to html

Examples related to getelementbyid