在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>元素，这些元素可帮助您在任何情况下（鼠标或键盘）更改行为。