web-dev-qa-db-ja.com

document.getElementByIDは関数ではありません

私はjQueryを学んでおり、チュートリアルに従っていましたが、非常に奇妙なエラーに戸惑いました。これが私の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>

および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 = "";
};

要素を追加するときReturnキーを押すことで問題はありません。しかし、[送信]ボタンをクリックすると、firebugにこのエラーが表示されます

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

代わりにjQueryを使用しようとしました

$("#task-text")

今回のエラーは次のとおりです。

$("<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

私はこれをしばらくの間デバッグしようとしましたが、私はそれを取得しません。それはおそらく私が犯した本当にばかげた間違いです。どんな助けも大歓迎です。

編集：私はjQuery 1.6.1を使用しています

javascriptjquerygetelementbyid
33
nikhil

document.getElementById()ではなくdocument.getElementByID()です。 Idのケーシングを確認します。

96
Buhake Sindi

getElementById()です

dの小文字のIdに注意してください。

16
Town

必要に応じて、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($("#task-text"),evt);
    });
});

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

私の場合、MDNによれば、elementの代わりにdocumentで使用していました。

Document.querySelector（）やDocument.querySelectorAll（）などの他の要素検索メソッドとは異なり、getElementById（）はグローバルドキュメントオブジェクトのメソッドとしてのみ使用でき、DOMのすべての要素オブジェクトのメソッドとしては使用できません。 ID値はドキュメント全体で一意である必要があるため、関数の「ローカル」バージョンは不要です。

1
3zzy

他の投稿でわかるように、これにはいくつかの問題がありますが、このエラーが発生する理由は、フォームにgetElementByIdという名前を付けているためです。そのため、document.getElementByIdは、javascriptが提供するデフォルトのメソッドではなく、フォームを指すようになりました。実用的なデモについては私のフィドルを参照してください 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