Getting DOM element value using pure JavaScript

Question

Is there any difference between these solutions?

Solution 1:

 function doSomething(id, value) { console.log(value); //... }

 <input id="theId" value="test" onclick="doSomething(this.id, this.value)" />

...and Solution 2:

 function doSomething(id) { var value = document.getElementById(id).value; console.log(value); //... }

 <input id="theId" value="test" onclick="doSomething(this.id)" />

Answer 1

Update: The question was edited. Both of the solutions are now equivalent.

Original answer

Yes , most notably! I don't think the second one will work (and if it does, not very portably ). The first one should be OK.

// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />

// JavaScript:
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

This should also work.

Answer 2

The second function should have:

var value = document.getElementById(id).value;

Then they are basically the same function.

Answer 3

In the second version, you're passing the String returned from this.id . Not the element itself.

So id.value won't give you what you want.

You would need to pass the element with this .

doSomething(this)

then:

function(el){
    var value = el.value;
    ...
}

---

Note: In some browsers, the second one would work if you did:

window[id].value 

because element IDs are a global property, but this is not safe .

It makes the most sense to just pass the element with this instead of fetching it again with its ID.

Answer 4

Pass the object:

doSomething(this)

You can get all data from object:

function(obj){
    var value = obj.value;
    var id = obj.id;
}

Or pass the id only:

doSomething(this.id)

Get the object and after that value:

function(id){
    var value = document.getElementById(id).value;  
}

Answer 5

There is no difference if we look on effect - value will be the same. However there is something more...

Solution 3:

 function doSomething() { console.log( theId.value ); }

 <input id="theId" value="test" onclick="doSomething()" />

if DOM element has id then you can use it in js directly

Answer 6

This should also work.

 function doSomething() { yourElement = document.getElementById("yourID); yourValue = yourElement.value; console.log(yourValue); console.log(yourValue); }

 <div id="yourID" value="1" onclick="doSomething()"> </div>

 function doSomething() { console.log( theId.value ); }

 <input id="theId" value="test" onclick="doSomething()" />