85

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)" />
Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
Adam Halasz
  • 57,421
  • 66
  • 149
  • 213
  • Edit: As several have pointed out, there are a few typos (including the lack of a function name in the javascript), but conceptually, they are the same and either one will work fine. – Jeff Nov 13 '10 at 16:15
  • The edits, which were made after 3 years made most of the answers here invalid. – TheMaster Oct 23 '18 at 17:39

6 Answers6

91

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.

ruth
  • 29,535
  • 4
  • 30
  • 57
yorick
  • 1,474
  • 10
  • 8
  • 1
    It goes for element arrays as well. Example: `items[i].id` – Taurib Jan 05 '15 at 08:15
  • Would you care to explain why you think your answer is what I would want to go with? – Barrosy Jun 13 '19 at 13:00
  • 1
    @Barrosy getting the id and then using getElementById is unneccesary when you have a reference to the element already (solution #2). Passing parameters explicitly (solution #1) can sometimes be a good programming practice. – yorick Jun 14 '19 at 14:41
54

The second function should have:

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

Then they are basically the same function.

Evan Mulawski
  • 54,662
  • 15
  • 117
  • 144
9

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.

user113716
  • 318,772
  • 63
  • 451
  • 440
6

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;  
}
A.L
  • 10,259
  • 10
  • 67
  • 98
R. Z.
  • 61
  • 1
  • 2
1

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

Kamil Kiełczewski
  • 85,173
  • 29
  • 368
  • 345
0

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()" />
Jarno Looij
  • 29
  • 1
  • 6