¿Puede alguien explicar qué hace la línea document.getElementById("demo")
en el ejemplo siguiente?
Entiendo que getElementById obtiene el id de demo pero el id es <p id="demo"></p>
¿Qué hace exactamente <p id="demo"></p>
en este código?
document.getElementById("edad")
está claro ya que obtiene el id de la edad que es la entrada.
begin snippet: js hide: false console: true babel: false -->
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>
Fin del fragmento;
Tienes razón en que la llamada document.getElementById("demo")
obtiene el elemento por el ID especificado. Pero tienes que mirar el resto de la sentencia para averiguar qué hace exactamente el código con ese elemento:
.innerHTML=voteable;
Puedes ver aquí que se establece el innerHTML
de ese elemento al valor de voteable
.
Considere
var x = document.getElementById("age");
Aquí x
es el elemento con id="edad"
.
Ahora mire la siguiente línea
var age = document.getElementById("age").value;
esto significa que usted está recibiendo el valor del elemento que tiene id="age"
.
getElementById
devuelve una referencia al elemento utilizando su id
. El elemento es el input
en el primer caso y el párrafo en el segundo.
https://developer.mozilla.org/en-US/docs/Web/API/document.getElementById