web-dev-qa-db-fra.com

Utilisation de document.getElementById en JavaScript

Quelqu'un peut-il expliquer ce que la ligne document.getElementById("demo") fait dans l'exemple ci-dessous?

Je comprends que getElementById obtient l’identifiant de la démo mais l’identifiant est <p id="demo"></p> Que fait exactement <p id="demo"></p> dans ce code?

document.getElementById("age") est clair car il obtient l'identifiant de l'âge qui est l'entrée.

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
3
user2931781

Vous avez raison de dire que l'appel document.getElementById("demo") vous récupère l'élément à l'aide de l'ID spécifié. Mais vous devez regarder le reste de la déclaration pour comprendre ce que fait exactement le code avec cet élément:

.innerHTML=voteable;

Vous pouvez voir ici que la valeur innerHTML de cet élément est définie sur voteable.

6
BoltClock

la ligne

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

dit 'la variable que j'ai appelée' age 'a la valeur de l'élément avec id' age '. Dans ce cas, le champ de saisie.

La ligne

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

dit dans une variable que j'ai appelée 'votable' je stocke la valeur en suivant la règle:

"Si vous avez moins de 18 ans, montrez" Trop jeune ", ou" Assez vieux ""

La dernière ligne dit de mettre la valeur de 'votable' dans l'élément avec id 'demo' (dans ce cas l'élément 'p')

2
phron

Considérer

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

Ici x est l'élément avec id="age".

Maintenant, regarde la ligne suivante

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

cela signifie que vous obtenez la valeur de l'élément qui a id="age"

2
Ranadheer Reddy

C’est juste un sélecteur qui vous aide à sélectionner des éléments spécifiques à la balise <p id = 'demo'></p> qui vous aident à changer le comportement, quel que soit le cas (souris ou clavier).

0
Mahesh Chaudhary

getElementById renvoie une référence à l'élément en utilisant sa id. L'élément est input dans le premier cas et le paragraphe dans le second.

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

0
andrei

Ici dans votre code demo est l'id où vous voulez afficher votre résultat après que l'événement click se soit produit et rien.

Vous pouvez prendre n'importe quoi

<p id="demo">

ou 

<div id="demo">

C'est juste un nœud dans un document où vous voulez juste afficher votre résultat.

0
Shoaib Chikate

document.getElementById("demo").innerHTML = voteable trouve l'élément avec la démo id et y place ensuite la valeur voteable; soit trop jeune ou assez vieux. 

Donc, effectivement <p id="demo"></p> devient par exemple <p id="demo">Old Enough</p>

0
Simon R