JavaScript-Typfehler: document.getElementById(...) ist null

Question

Hier ist mein html Code:

   Suche auf der Website:

Im Header habe ich meine JavaScript-Datei mit folgendem spezifischen Code eingebunden:

window.onload = function () {
    getValues = function (id) {
    var i, values = [], form = document.getElementById(id);
    for (i = 0; i < form.length ;i++) {
        values.push( form.elements[i].value );
    }
    return values;
  }
}

Ich habe versucht, auf die Funktion zuzugreifen mit console.log(getValues("searchForm") ); aber stattdessen erhielt ich in meiner Firefox Konsole den folgenden Fehler: TypeError: form is null.

Kann jemand vorschlagen, warum das nicht funktioniert?

Answer 1

Sie verwenden den Wert des name-Attributs und nicht den id-Attribut. Sie müssen also entweder name in id ändern oder

form = document.getElementsByName(id)[0];

Beachten Sie auch, dass der obige Code ein NodeList zurückgibt, sodass Sie den Index verwenden müssen, um das gewünschte Element zu erhalten.

Answer 2

Um alle Werte eines Formulars zu erhalten:

"use strict";

var findValuesIn = function(form) {

  var fields = form.querySelectorAll('input,textarea,select'),
      values = {},
      i;

  for (i in fields) {
    values[ fields[i].name ] = fields[i].value; 
  }

  return values;

}

document.getElementById('obtainValues').addEventListener('click',function(){

  var ourForm = document.getElementById('f');

  var vals = findValuesIn(ourForm);

  // debug
  document.getElementById('debug').innerHTML = JSON.stringify(vals);

});

input, select, textarea {
  float: left;
}
button {
  float: left;
  clear: both;
  margin: 1em;
}
label {
  float: left;
  clear: left;
  width: 10em;
}
output {
  display: block;
  clear: both;
  margin: 1em;
  padding: .5em;
  border: 1px solid gray;
  background-color: #eee;
}

  Name

  Search

  Lieblingsfarbe

    rot
    blau
    gelb

  Werte abrufen