Erste DOM-element-Wert mit reinem JavaScript

Ist es Unterschied zwischen diesen Lösungen?

Lösung 1:

JS:

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

HTML:

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

...und Lösung 2:

JS:

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

HTML:

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

  • Edit: Da mehrere haben darauf hingewiesen, es sind ein paar Tippfehler (einschließlich des Mangels der name einer Funktion in der javascript), aber konzeptionell sind Sie gleich und beide funktionieren.
  • Die änderungen, die gemacht wurden, nach 3 Jahren machte die meisten der Antworten hier ungültig.
InformationsquelleAutor Adam | 2010-11-13
  1. 71

    Ja, vor allem! Ich glaube nicht, dass die zweite funktioniert (und wenn Sie es tut, nicht sehr portabel). Die erste sollte OK sein.

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

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

    Sollte dies auch funktionieren.

    Update: die Frage wurde bearbeitet. Beide Lösungen sind jetzt gleichwertig.

    • Es geht für die element-arrays. Beispiel: items[i].id
    • Würdet Ihr zu erklären, warum Sie denken, dass Ihre Antwort ist, was ich würde wollen, um mit zu gehen?
    • immer die id und dann mit getElementById ist unneccesary, wenn Sie eine Referenz auf das element schon (Lösung #2). Die übergabe von Parametern explizit (Lösung #1), kann manchmal ein guter Programmierstil.
    InformationsquelleAutor yorick
  2. 36

    Die zweite Funktion haben sollte:

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

    Dann sind Sie im Grunde die gleiche Funktion.

    InformationsquelleAutor Evan Mulawski
  3. 9

    In der zweiten version, sind Sie vorbei die zurückgegebene Zeichenfolge aus this.id. Nicht das element selbst.

    So id.value nicht geben Ihnen, was Sie wollen.

    Würden Sie brauchen, um passieren Sie das element mit this.

    doSomething(this)

    dann:

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

    Hinweis: In einigen Browsern, die zweite würde funktionieren, wenn du es getan hast:

    window[id].value

    weil element-IDs sind eine Globale Eigenschaft, aber das liegt sicher nicht.

    Macht es am meisten Sinn, einfach übergeben Sie das element mit this statt Holen es wieder mit seiner ID.

    InformationsquelleAutor user113716
  4. 6

    Übergeben das Objekt:

    doSomething(this)

    Können Sie alle Daten aus dem Objekt:

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

    Oder übergeben Sie die id nur:

    doSomething(this.id)

    Rufen Sie das Objekt, und nach diesem Wert:

    function(id){
    var value = document.getElementById(id).value;  
}
    InformationsquelleAutor R. Z.
  5. 0

    Gibt es keinen Unterschied, wenn wir uns auf Effekt - Wert der gleiche sein wird. Aber es ist etwas mehr...

    Lösung 3:

    JS:

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

    HTML:

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

    wenn DOM-element hat id dann können Sie es verwenden in js direkt

    InformationsquelleAutor Kamil Kiełczewski
Schreibe einen Kommentar