web-dev-qa-db-fra.com

document.getElementByID n'est pas une fonction

J'apprends jQuery et suivais un tutoriel, une erreur très étrange m'a perplexe. Voici mon html:

<!doctype html>
<html>
  <head>
    <title> Simple Task List </title>
    <script src="jquery.js"></script>
    <script src="task-list.js"></script>
  </head>

  <body>
    <ul id="tasks">

    </ul>
      <input type="text" id="task-text" />
      <input type="submit" id="add-task" />
  </body>
</html>

et jQuery:

$(document).ready(function(){
    //To add a task when the user hits the return key
    $('#task-text').keydown(function(evt){
      if(evt.keyCode == 13)
      {
        add_task(this, evt);
      }
      });
    //To add a task when the user clicks on the submit button
      $("#add-task").click(function(evt){
        add_task(document.getElementByID("task-text"),evt);
        });
    });

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.value;
  $("<li>").text(taskText).appendTo("#tasks");
  textBox.value = "";
};

Quand j'ajoute des éléments En appuyant sur la touche retour, il n'y a pas de problème. Mais lorsque je clique sur le bouton Soumettre, Firebug affiche cette erreur

document.getElementByID is not a function
[Break On This Error] add_task(document.getElementByID("task-text"),evt);
task-list.js (line 11)

J'ai essayé d'utiliser jQuery à la place en le remplaçant par

$("#task-text")

Cette fois, l'erreur est:

$("<li>").text(taskText).appendTo is not a function
[Break On This Error] $("<li>").text(taskText).appendTo("#tasks");
task-list.js (line 18
which results in the following error

J'essaie de déboguer cela depuis un certain temps, mais je ne comprends tout simplement pas. C'est probablement une erreur vraiment stupide que j'ai commise. Toute aide est très appréciée.

Edit: j'utilise jQuery 1.6.1

javascriptjquerygetelementbyid
33
nikhil

C'est document.getElementById() et non document.getElementByID(). Vérifiez le boîtier pour Id.

96
Buhake Sindi

C'est getElementById()

Notez les minuscules d dans Id.

16
Town

J'ai modifié votre script pour qu'il fonctionne avec jQuery, si vous le souhaitez.

$(document).ready(function(){
    //To add a task when the user hits the return key
    $('#task-text').keydown(function(evt){
          if(evt.keyCode == 13)
          {
             add_task($(this), evt);
          }
    });
    //To add a task when the user clicks on the submit button
    $("#add-task").click(function(evt){
        add_task($("#task-text"),evt);
    });
});

function add_task(textBox, evt){
  evt.preventDefault();
  var taskText = textBox.val();
  $("<li />").text(taskText).appendTo("#tasks");
  textBox.val("");
};
2
DanielB

Dans mon cas, je l'utilisais sur un element au lieu de document, et selon MDN:

Contrairement à certaines autres méthodes de recherche d'élément telles que Document.querySelector () et Document.querySelectorAll (), getElementById () est uniquement disponible en tant que méthode de l'objet de document global, et non disponible en tant que méthode sur tous les objets élément du DOM. Étant donné que les valeurs d'ID doivent être uniques dans tout le document, il n'est pas nécessaire de disposer de versions "locales" de la fonction.

1
3zzy

Il y a plusieurs problèmes avec cela, comme vous pouvez le voir dans les autres articles, mais la raison pour laquelle vous obtenez cette erreur est que vous nommez votre formulaire getElementById. Ainsi, document.getElementById pointe désormais vers votre formulaire au lieu de la méthode par défaut fournie par javascript. Voir mon violon pour une démonstration de travail https://jsfiddle.net/jemartin80/nhjehwqk/ .

function checkValues()
{
   var isFormValid, form_fname;

   isFormValid = true;
   form_fname = document.getElementById("fname");
   if (form_fname.value === "")
   {
       isFormValid = false;
   }
   isFormValid || alert("I am indicating that there is something wrong with your input.")

   return isFormValid;
}
1
jemartin80