Understanding a few lines of JavaScript code

Question

I am new to JavaScript. I want to write a JavaScript to calculate the area of various geometries.The program takes dimensions from a user.I want to know the what does [0] show in following line:

document.getElementsByName('ID OF INPUT FIELD')[0].value;

Can anyone give me name of this thing (i.e array so something else !) so that I can learn it or please give me a link to understand this.

<script>
function func() {
var base = document.getElementsByName('width')[0].value; // ---> what [0] shows? 
var height = document.getElementsByName('height')[0].value;
var out = (1/2) * parseFloat(base) * parseFloat(height);

document.getElementsByName('output')[0].value= out;


}
</script>

<body>
<html>
<br><center> <button onClick="func()">Calculate Area</button></center><br>

<table>
    
<tr><td align="right">Width (b):</td>
<td align="left"><input type="textbox" name="width"></input><br></td><br><br>

<tr><td align="right">Height (h):</td>
<td align="left"><input type="textbox" name="height"></input><br></td><br><br>



<tr>
<td align="right">The area is: </td>
<td align="left"><input type="textbox" name="output"></input><br>
</td>
</table>
</body>
</html>

It gets the Node at the first position in the NodeList.

Aluan Haddad
– Aluan Haddad

2018-04-08 12:33:05 +00:00
Commented Apr 8, 2018 at 12:33 — Aluan Haddad
– Aluan Haddad, Commented Apr 8, 2018 at 12:33

mhawke · Accepted Answer · 2018-04-08 12:55:10Z

document.getElementsByName('width') returns a NodeList, i.e. a list of nodes that have an attribute named "name" and value "width". For your example HTML that will give you a NodeList of length 1, the first (and only) item being the text input box for the width:

<input type="textbox" name="width">

Because the NodeList is a list you can access its items by index. Indices are zero-based so [0] accesses the first item in the list, which we already know to be the width text input element.

The final piece of the puzzle is the use of .value which will return the contents of the text input element. This will be whatever value the user has entered into that input box. Therefore the result of:

var base = document.getElementsByName('width')[0].value;

is to create a variable named base which references the value entered into the first text input box with its name attribute set to "width".

You can see the same technique being used to acquire the height and to write the result into the text box with name="output".

G_S · Accepted Answer · 2018-04-08 12:40:37Z

0

document.getElementsByName('width') line returns all the HTML dom elements with name "width" (and its a list).

So in your example it returns the element <input type="textbox" name="width"></input> element as a list. and you are using [0] to get the first element.

answered Apr 8, 2018 at 12:40

G_S

7,1302 gold badges27 silver badges54 bronze badges

Comments

Jacob · Accepted Answer · 2018-04-08 12:42:26Z

0

getElementsByName('width') returns a NodeList of elements that have a name attribute that have the value of 'width'

answered Apr 8, 2018 at 12:42

Jacob

6247 silver badges21 bronze badges

Comments

Alex Nguyen · Accepted Answer · 2018-04-08 13:33:10Z

0

document.getElementsByName api will return the collection of elements. Therefore [0] will return the first found element which is matched with the value of "name" attribute . Example :

var base = document.getElementsByName('width')

"base" is the array contain all elements having attribute "name" = "width". So if you want to access the first element , just write this line : base[0].

answered Apr 8, 2018 at 13:33

Alex Nguyen

1,09012 silver badges28 bronze badges

Collectives™ on Stack Overflow

Understanding a few lines of JavaScript code

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related