HOWTO · JavaScript
Utiliser la variable JavaScript en HTML
Les variables JavaScript peuvent être affichées ou fonctionnelles en HTML en utilisant un ID ou une classe d'un élément HTML, ou un élément peut être créé dans le code de script pour prévisualiser la variable.
Les variables JavaScript sont souvent définies par l’utilisateur lors du codage, ou vous pouvez utiliser l’invite pour récupérer des données et les stocker dans une variable pour une utilisation ultérieure.
Ici, nous montrerons comment agir sur une variable définie par l’utilisateur et l’utiliser en HTML, et la démonstration ultérieure expliquera comment l’invite peut nous aider à cet égard.
Utilisation de variables définies par l’utilisateur JavaScript dans HTML
Nous utilisons jsbin pour les exemples de code, et ici vous verrez que l’élément p est identifié par le id output. Initialement, la variable myPet est définie sur Tobey, et la dernière ligne simple a été exécutée dans la page Web. getElementById trouve le id préféré, puis les variables sont passées au format inner.HTML afin que les variables JavaScript puissent être utilisées dans le HTML.
Extrait de code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = 'Tobey';
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Production :
Variable JavaScript chargée à partir de l’invite
Dans ce segment, nous verrons comment nous saisissons facilement la valeur dans la fenêtre d’invite, et cela s’affiche directement dans notre page Web chargée.
Extrait de code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: pink;
}
</style>
</head>
<body>
<p id="output"></p>
</body>
</html>
var myPet = prompt();
var nameLength = myPet.length;
document.getElementById('output').innerHTML =
myPet + ' is a ' + nameLength + ' letter name!';
Production :
Créer un élément de balise à partir d’un script et d’un accès variable au HTML
Ici, nous allons créer une balise p dans le script, qui sera accessible dans le HTML body. Le p.innerHTML est la clé pour transmettre les données variables vers la balise body.
Extrait de code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
p{
background: gray;
color: white;
text-align: center;
}
</style>
</head>
<body>
</body>
</html>
var myPet = prompt('Enter Name');
var nameLength = myPet.length;
p = document.createElement('p');
p.innerHTML = myPet + ' is a ' + nameLength + ' letter name!';
document.body.appendChild(p);
Production :
