Afficher une variable JavaScript dans le corps HTML
-
Utilisez
innerHTMLpour afficher la variable JavaScript dans le corps HTML -
Utilisez la propriété
document.write()pour afficher la variable JavaScript dans le corps HTML -
Utilisez la propriété
window.alertpour afficher la variable JavaScript dans le corps HTML
Il est souvent plus facile de définir explicitement une balise script et d’ajouter le bloc de code pour la sortie nécessaire dans un corps HTML. Nous utilisons également des balises script dans la balise head pour charger la barrière de code de JavaScript avant la balise body.
Chaque convention a ses remarques ; Si nous devons vérifier si le code est exempt de bogues, nous pouvons ajouter des fonctions JavaScript dans la section head pour effectuer la tâche. Nous pouvons également utiliser JavaScript dans l’élément body pour les événements de clic et d’autres fonctionnalités dynamiques.
Ici, nous allons montrer comment afficher une variable JavaScript dans le corps HTML, et plus précisément, nous allons ajouter nos blocs de code dans l’élément body. Mais il y a une différence entre la valeur de passage dans le corps HTML et l’affichage temporaire d’une valeur déclenchée par les conventions de code JavaScript.
Utilisez innerHTML pour afficher la variable JavaScript dans le corps HTML
L’utilisation de innerHTML en récupérant un id ou une classe spécifique et en transmettant la valeur d’une variable est l’une des façons les plus courantes d’afficher une variable JavaScript dans le corps HTML.
Nous allons initialiser une balise span dans notre corps HTML avec un id = "input". Ensuite, la balise script aura une variable envoyée à cet id = "input" via la propriété innerHTML. Cette manipulation DOM est pratique lors du placement de variables JavaScript dans le corps HTML.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<p> Hello! I'm <span id="input"></span>.</p>
<script>
document.getElementById('input').innerHTML = "Robert" ;
</script>
</body>
</html>
Production :
Utilisez la propriété document.write() pour afficher la variable JavaScript dans le corps HTML
Ici, le système d’initialisation de la propriété document.write(parameter) est surtout utilisé pour tester des variables. Dans ce cas, le parameter est la variable ou l’objet défini en JavaScript.
On déclarera la variable dans une balise script avant le segment pour l’afficher. Plus tard, nous aurons une balise p, et à l’intérieur de celle-ci, une autre balise script prend l’initiation du script supérieur.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
<script>
var input = "Gwen";
function doc(){
document.write(input);}
</script>
</head>
<body>
<p> Hello! I'm <script>doc(input)</script>.</p>
</body>
</html>
Production :
Utilisez la propriété window.alert pour afficher la variable JavaScript dans le corps HTML
Il s’agit d’un processus très simple pour tester votre variable via la manipulation du DOM.
Nous allons définir un objet ou une variable JavaScript et stocker ici une valeur aléatoire. À l’intérieur de la balise script, nous déclarerons la window.alert(variable), et cette propriété affichera un message lorsqu’elle déclenchera l’objet window.
Extrait de code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<script>
var input = "Hello! I'm Tom.";
window.alert(input);
</script>
</body>
</html>
Production :
