在JavaScript中使用document.getElementById

Question

有人可以解釋下面的例子中document.getElementById("demo")行的作用嗎？

我理解getElementById獲取了demo的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> 

Answer 1

你是正確的，因為document.getElementById("demo")調用通過指定的ID獲取元素。 但是你必須查看語句的其余部分，以弄清楚代碼對該元素的確切作用：

.innerHTML=voteable;

你可以在這里看到，它正在將該元素的innerHTML設置為可voteable的值。

Answer 2

考慮

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

這里x是id="age"的元素。

現在看下面一行

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

這意味着你獲得了id="age"的元素的值

Answer 3

這條線

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

說'我稱之為'age'的變量具有id為'age'的元素的值。 在這種情況下輸入字段。

這條線

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

在我稱之為'可投票'的變量中，我按照規則存儲值：

“如果年齡低於18歲，則顯示'太年輕'否則顯示'夠老'”

最后一行告訴將'voteable'的值放在id為'demo'的元素中（在本例中為'p'元素）

Answer 4

getElementById使用其id返回對元素的引用。 元素是第一種情況下的input ，第二種情況下是段落。

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

Answer 5

在您的代碼demo中，您需要在單擊事件發生后顯示結果的ID，而不是任何內容。

你可以拿任何東西

<p id="demo">

要么

<div id="demo"> 

它只是文檔中的節點，您只想顯示結果。

Answer 6

document.getElementById("demo").innerHTML = voteable查找帶有id demo的元素，然后將可voteable值放入其中; 要么太年輕，要么太老了。

所以有效地<p id="demo"></p>變為例如<p id="demo">Old Enough</p>

Answer 7

它只是一個選擇器，可幫助您選擇特定標記<p id = 'demo'></p>元素，這些元素可幫助您在任何情況下（鼠標或鍵盤）更改行為。