What is the difference between using document.getElementByID and document.form?

Question

I am trying to teach myself javascript through simple programming ideas. I tasked myself to make a way to calculate two numbers and provide a total of the results by option of using any of the four available operators. It's sort of a very simple calculator, to get to the point. I don't think I need to copy my html code - so I just posted my javascript.

Since I am new to programming in general and javascript, I looked around the web and found some code pointers.

<script>
function add() {
        var entry1 = document.getElementById("entry1").value;
        var entry2 = document.getElementById("entry2").value;
        var sum = Number(entry1)+Number(entry2);
        document.getElementById("results").value=sum    
 }

function sub() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)-Number(entry2);
        document.form.results.value=sum    
}

function multi() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)*Number(entry2);
        document.getElementById("results").value=sum    
}

function div() {
        var entry1 = document.form.entry1.value;
        var entry2 = document.form.entry2.value;
        var sum = Number(entry1)/Number(entry2);
        document.getElementById("results").value=sum    
}
</script>

I think this gives you insight into what I am playing around with. I thought it was interesting I found a way to get around using document.getElementByID, but I guess what I am trying to understand is how you can using both ways...the document.form... and document.getElementById.

Using "document.getElementById" will search the whole DOM looking for "entry1." "Form" in "document.form" refers to the form that encapsulates the whole contents in the <body> tag. As a theory, I did a <div name="blah"> tag in front of <form name="form"> to see if it would use "blah" if I changed document.form to document.blah...it broke. Same thing happened when I tried document.blah.form.entry1....). I think you can see what I am getting at.

I am just curious as to why document.form.entry1.value; works like document.getElementById("entry1").value;?

Using document.getElementById you are retrieving a specific element with the specified ID on the page. IDs should be unique to each element on a page. when using `document.form.` you are 'filtering down your selection. `document` refers to the webpage document, `form` retrieves any forms on the page (there may be more than 1), then `entry1` will retrieve the element with that id within the `document.form`. — Phil Cross, Feb 02 '14 at 22:35
Should be `document.forms` if you trying to get collection of form elements in the document. It seems, you add id or name to your form element as `form`. — Givi, Feb 02 '14 at 22:38
possible duplicate of [Best Practice: Access form elements by HTML id or name attribute?](http://stackoverflow.com/questions/2435525/best-practice-access-form-elements-by-html-id-or-name-attribute) — Givi, Feb 02 '14 at 23:00

score 0 · Answer 1 · answered Feb 02 '14 at 23:07

0

As others have mentioned,document.getElementById is to be used to select a specific element regardless of what it is. document.forms is to be used to specifically target forms and their elements.

answered Feb 02 '14 at 23:07

Sharikul Islam

319
2
8

score 0 · Answer 2 · edited Mar 29 '20 at 07:40

0

I think document.form points the specific form named or id'ed as the identifier "form" like <form name="form" id="form">.
Please check the syntax document.forms instead of document.<an_identifier> carefully.
document.<an_identifier> may be a dialect of IE.

edited Mar 29 '20 at 07:40

סטנלי גרונן

2,917
23
46
68

answered Mar 29 '20 at 03:36

takahar tanak

31
5

score -1 · Answer 3 · answered Feb 02 '14 at 22:42

it's just a kind of syntactic sugar as for me.

Where have you found that "funny" sample? Let me refactor it a bit. hope it will help you better understand to main idea.

<script>



function add(a,b) {
       return Number(a) + Number(b);
 }

function sub(a,b) {
         return Number(a) - Number(b);
}

function multi(a,b) {
        return Number(a) * Number(b);
}

function div(a,b) {
        return Number(a) / Number(b);
}

function main () { //as an entry point;
  var entry1 = document.getElementById('entry1').value,
      entry2 = document.getElementById('entry2').value;
      $results =  document.getElementById("results");

  $results.value = add (entry1, entry2);
  //$results.value = sub (entry1, entry2);
  //$results.value = multi (entry1, entry2);
  //$results.value = div (entry1, entry2);
}
</script>

btw: even functions are redundant, but OK I left them as is.

enjoy to JS world

What about OP question: "What is the difference between using document.getElementByID and document.form?" — Givi, Feb 02 '14 at 22:50

What is the difference between using document.getElementByID and document.form?

3 Answers3