web-dev-qa-db-ja.com

JavaScriptでのdocument.getElementByIdの使用

誰かがdocument.getElementById("demo")行が以下の例で何をしているのか説明できますか？

GetElementByIdがデモのIDを取得することを理解していますが、IDは_<p id="demo"></p>_です。このコードで_<p id="demo"></p>_は正確に何をしているのですか？

document.getElementById("age")は、入力である年齢のIDを取得するため、明確です。

_function myFunction() {
  var age,voteable;
  age = document.getElementById("age").value;
  voteable = (age < 18)? "Too young" : "Old enough";
  document.getElementById("demo").innerHTML = voteable;
}_
_<p>Click the button to check the age.</p>

Age:<input id="age" value="18" />
<p>Old enough to vote?</p>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>_
javascripthtmlgetelementbyid
5
user2931781

document.getElementById("demo")の呼び出しは、指定されたIDで要素を取得するという点で正しいです。しかし、ステートメントの残りの部分を見て、コードがその要素を使用して正確に何を行っているかを理解する必要があります。

.innerHTML=voteable;

ここでは、その要素のinnerHTMLをvoteableの値に設定していることがわかります。

6
BoltClock

検討する

 var x = document.getElementById("age");

ここでxはid="age"の要素です。

次の行を見てください

var age = document.getElementById("age").value;

これは、id="age"を持つ要素の値を取得していることを意味します

3
Ranadheer Reddy

この線

age=document.getElementById("age").value;

「私が「age」と呼んだ変数は、「age」というIDを持つ要素の値を持っています。この場合は入力フィールドです。

この線

voteable=(age<18)?"Too young":"Old enough";

私は 'voteable'と呼ばれる変数に、次のルールに従って値を格納します：

「18歳未満の場合は、「若すぎる」と表示し、それ以外の場合は「十分に古い」と表示します。 "

最後の行は、 'voteable'の値をid 'demo'の要素（この場合は 'p'要素）に置くように指示しています

2
phron

特定のタグを選択するのに役立つセレクタにすぎません<p id = 'demo'></p>要素は、任意のイベント（マウスまたはキーボード）での動作の変更に役立ちます。

0
Mahesh Chaudhary

getElementByIdは、そのidを使用して要素への参照を返します。要素は、最初のケースではinputで、2番目のケースでは段落です。

https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById

0
andrei

ここでのコードのdemoは、クリックイベントの発生後に何もせずに結果を表示するIDです。

あなたは何でも取ることができます

<p id="demo">

または

<div id="demo">

結果を表示したいドキュメントの単なるノードです。

0
Shoaib Chikate

document.getElementById("demo").innerHTML = voteableは、idがdemoの要素を見つけて、voteable値をその要素に配置します。若すぎるか年を取りすぎています。

したがって、実際には<p id="demo"></p>は、たとえば<p id="demo">Old Enough</p>になります。

0
Simon R