Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

JavaScriptdocument.getElementByIDは関数ではありませんソリューション

JavaScriptのgetElementByIdメソッドは、HTMLドキュメントオブジェクトモデル（DOM）から要素を選択します。このメソッドのスペルを間違えると、document.getElementByID is not a functionに遭遇します。 プログラムのエラー。

このチュートリアルでは、このエラーの意味と、エラーが発生する理由について説明します。このエラーの例を見ていき、エラーを修正するために知っておくべきことを学ぶことができます。

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

document.getElementById() methodはJavaScriptセレクターメソッドの1つです。このメソッドは、HTMLDOMからIDに基づいてオブジェクトを取得します。

このメソッドは、要素のコンテンツを操作したり、コンテンツや属性などの特定の要素に関する情報を取得したりするために使用されます。

IDはHTMLで定義されています。 IDは、特定の要素に固有である必要があります。

<header id=“top_header”></header>

<header> タグのIDはtop_header 。このIDは<header>に固有です 鬼ごっこ。 IDは、CSSを使用して特定の要素にスタイルを適用するためによく使用されます。

document.getElementById() 大文字と小文字が区別されます。この方法は次のとおりではありません。

参加者の81％は、ブートキャンプに参加した後、自分たちの技術的な仕事の見通しについてより自信を持っていると述べました。今日のブートキャンプにマッチしましょう。

平均的なブートキャンプの卒業生は、ブートキャンプの開始から最初の仕事を見つけるまで、キャリアの移行に6か月も費やしませんでした。

  • document.getelementbyid（）
  • document.getElementByID（）
  • document.GetElementById（）

メソッド名のその他のバリエーションは、JavaScriptでは受け入れられません。

IDは別の単語の省略形であるため大文字で書きたくなりますが、この方法では大文字の Iを使用する必要があります。 小文字のd 。

getElementByIdメソッドの詳細については、JavaScriptgetElementByIdに関するガイドをご覧ください。

シナリオ例

ユーザーをアプリケーションに歓迎するコードスニペットを作成します。ウェルカムメッセージは、ページの上部に表示されるタイトルに表示されます。

この例では、デモ名を使用します。

まず、Webページのウェルカムセクションの本文のHTMLコードを定義します。 

<html>
<body>
<header>
<h1 id="welcome_title">Welcome</h1>
</header>
	</body>
</html>

デフォルトでは、<h1> タグにはコンテンツが含まれますWelcome 。 <header> tagは、タイトルが配置されている親タグです。次に、<script>を追加します

タグの下にタグを付けます。スクリプトタグには、ウェルカムメッセージのすべてのJavaScriptコードが含まれます。 

…
</header>
<script>
</script>
	</body>
...

スクリプト内で、タイトルを選択し、その内容を変更します。 

var title = document.getElementByID("welcome_title");
title.textContent = "Welcome, Luke!";

getElementById() メソッドはタイトルを選択します。このHTML要素をtitleというJavaScript変数に割り当てます。 。タイトルの内容を「ようこそ、ルーク！」に変更します。 textContentを使用します タイトルを変更する方法。

コードを実行して、何が起こるか見てみましょう。 JavaScriptコンソールを開くと、次のエラーが表示されます。

JavaScriptdocument.getElementByIDは関数ではありませんソリューション

コードが正しく機能していません。タイトルは変更されていません：

JavaScriptdocument.getElementByIDは関数ではありませんソリューション

ソリューション

document.getElementByIDに誤った大文字と小文字を使用しました セレクタ。大文字の私を使用する代わりに 小文字のd 、大文字の I を使用しました およびD 。

JavaScriptは、プログラムをgetElementByIdの呼び出しとして登録しません 関数名では大文字と小文字が区別されるため、関数。

関数に正しいケースを使用するように、コードを変更する必要があります。 

var title = document.getElementById("welcome_title");
title.textContent = "Welcome, Luke!";

現在、Idを使用しています IDの代わりに 関数呼び出しで。新しいコードを実行してみましょう。

JavaScriptdocument.getElementByIDは関数ではありませんソリューション

私たちのプログラムは、タイトルの内容を正常に変更して、ユーザーの名前を含めています。

結論

document.getElementById() メソッドは、Webページから要素を選択します。このメソッドを使用すると、要素の内容を表示および変更できます。
この方法を使用するときは、正しいケースを使用していることを確認する必要があります。 IDはすべて大文字ではありません。大文字の私を使用する必要があります 小文字のd メソッドが機能するために。


  1. JavaScript関数の適用

    JavaScriptのapply（）関数を使用すると、異なるオブジェクトから同じメソッドを使用できます。ここでは、パラメータが配列として渡されます。 以下は、JavaScript関数apply（）-のコードです。 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scal

  2. JavaScriptの「コンストラクター関数ではない」エラーを説明しますか？

    コンストラクターではないコンストラクターとしてオブジェクトまたは変数を使用すると、コンストラクターではない関数エラーが発生します。 以下は、JavaScriptのコンストラクター関数エラーではないためのコードです- 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-sca