La méthode document.getElementById() retourne un objet HTML à partir de son id, défini dans la propriété id de la balise de l'objet.
En javascript, savoir utiliser la méthode document.getElementById() de l'objet document est très pratique car elle vous permet d'accéder à un élément unique de votre page web facilement pour, par exemple, modifier le style CSS de l'élément, récupérer des informations sur l'élément, etc.
Exemple 1
<script>
function f(){
var obj = document.getElementById("champ_input")
alert('le champ a pour valeur : '+ obj.value)
obj.value ="autre valeur"
alert('maintenant il contient : '+ obj.value)
}
</script>
...
<input type = "text" id = "champ_input"><br/>
<input type = "button" onclick= "f()" value =" modifier le champ">
Entrez une valeur dans ce champ : | |
La fonction f récupère l'objet ayant "champ_input" pour id et le stocke dans la variable "obj". Ensuite on récupère la valeur (.value) de ce champ pour la lire (pour afficher un message) ou pour l'écrire et modifier le contenu du champ.
Exemple 2
<script>
function executer(){
var terme1 = document.getElementById('t1').value
var terme2 = document.getElementById('t2').value
document.getElementById('res').value = parseFloat(terme1)+parseFloat(terme2)
}
</script>
...
<input id="t1" size="3"> + <input id="t2" size="3">
<input type="button" value=" = " onclick="executer()"> <input id="res">
+
Exemple 3
Nous pouvons modifier la couleur de fond (backgroundColor) d'une div.
<div id="div1" style="background-color:red;width:100px;height:100px;"></div> <input type="button" value="Vert" onclick="javascript:document.getElementById('div1').style.backgroundColor='green';"> <input type="button" value="Rouge" onclick="javascript:document.getElementById('div1').style.backgroundColor='red';">
Exercice 1
//Compléter le modèle pour écrire dans le 2ème input, la valeur présente dans le premier input. //L'exercice se trouve dans l'éditeur. Cliquez ici. <DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title> Ex 7-1-1 </title> <script type="text/javascript"> function executer(){ //Complétez ici } </script> </head> <body> <input id="i1"> <input value="--->" onclick="executer()" type="button"> <input id ="i2"> </body> </html>
Exercice 2
//Complétez la fonction afficher(). //L'utilisateur entre son nom et son prénom ; un message les affiche puis, ils sont placés dans l'input "nom_input". //L'exercice se trouve dans l'éditeur. Cliquez ici. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>exercice 1.3 <script type="text/javascript"> function afficher(){ //Complétez ici la fonction } </script> </head> <body> <table> <tr><td>Nom : </td><td><input id="nom" size="30"></td></tr> <tr><td>Prénom : </td><td><input id="prenom" size="30"></td></tr> <tr><td><button onclick="afficher()">afficher le nom et le prénom</button></td><td></td></tr> <tr><td>Nom & Prénom : </td><td><input id="nom_input" size="30"></td></tr> </table> </body> </html>