DOM-elementwaarde ophalen met pure JavaScript

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

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

Antwoord 1, autoriteit 100%

Update:de vraag is bewerkt. Beide oplossingen zijn nu equivalent.

Oorspronkelijk antwoord

Ja, vooral! Ik denk niet dat de tweede zal werken (en als dat zo is, niet erg draagbaar). De eerste zou in orde moeten zijn.

// HTML:
<input id="theId" value="test" onclick="doSomething(this)" />
// JavaScript:
function(elem){
    var value = elem.value;
    var id    = elem.id;
    ...
}

Dit zou ook moeten werken.

Antwoord 2, autoriteit 49%

De tweede functie zou moeten hebben:

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

Dan zijn ze in principe dezelfde functie.

Antwoord 3, autoriteit 11%

In de tweede versie geef je de tekenreeks door die wordt geretourneerd door this.id. Niet het element zelf.

Dus id.valuegeeft je niet wat je wilt.

Je zou het element moeten doorgeven met this.

doSomething(this)

dan:

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

Opmerking: in sommige browsers zou de tweede werken als u dat deed:

window[id].value 

omdat element-ID’s een algemene eigenschap zijn, maar dit is niet veilig.

Het is het meest logisch om het element gewoon met thisdoor te geven in plaats van het opnieuw op te halen met zijn ID.

Antwoord 4, autoriteit 7%

Geef het object door:

doSomething(this)

U kunt alle gegevens van object krijgen:

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

Of geef alleen de iddoor:

doSomething(this.id)

Haal het object op en daarna de waarde:

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

Antwoord 5

Er is geen verschil als we kijken naar het effect – de waarde zal hetzelfde zijn. Er is echter nog iets meer…

Oplossing 3:

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

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