web-dev-qa-db-fra.com

Comment utiliser cette variable JavaScript en HTML?

J'essaie de créer une page simple qui vous demande votre nom, puis utilise name.length (JavaScript) pour déterminer la durée de votre nom.

Ceci est mon code jusqu'à présent:

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
</body>

Je ne sais pas trop quoi mettre dans les balises body afin que je puisse utiliser les variables que j'ai énoncées précédemment. Je me rends compte que c'est probablement une question de niveau débutant, mais je n'arrive pas à trouver la réponse.

javascripthtmlvariables
4
Joseph

Vous n'utilisez pas de variables JavaScript en HTML. HTML n'est pas un langage de programmation, c'est un langage de balisage, il "décrit" à quoi devrait ressembler la page.

Si vous souhaitez afficher une variable à l'écran, utilisez JavaScript.

D'abord, vous avez besoin d'un endroit où écrire:

<body>
    <p id="output"></p>
</body>

Ensuite, vous devez mettre à jour votre code JavaScript pour écrire dans cette balise <p>. Assurez-vous de le faire après la page est prête.

<script>
window.onload = function(){
    var name = Prompt("What's your name?");
    var lengthOfName = name.length

    document.getElementById('output').innerHTML = lengthOfName;
};
</script>


window.onload = function() {
  var name = Prompt("What's your name?");
  var lengthOfName = name.length

  document.getElementById('output').innerHTML = lengthOfName;
};
<p id="output"></p>

14
Rocket Hazmat

Vous pouvez créer un élément <p>:

<!DOCTYPE html>
<html>
  <script>
  var name = Prompt("What's your name?");
  var lengthOfName = name.length
  p = document.createElement("p");
  p.innerHTML = "Your name is "+lengthOfName+" characters long.";
  document.body.appendChild(p);
  </script>
  <body>
  </body>
  </html>

5
user1823

Vous pouvez créer un élément avec un identifiant, puis affecter cette valeur de longueur à cet élément.

var name = Prompt("What's your name?");
var lengthOfName = name.length
document.getElementById('message').innerHTML = lengthOfName;
<p id='message'></p>

3
imran qasim

Essaye ça:

<body>
    <div id="divMsg"></div>
</body>
<script>
    var name = Prompt("What's your name?");
    var lengthOfName = name.length;
    document.getElementById("divMsg").innerHTML = "Length: " + lengthOfName;
</script>
1
Márcio Gonzalez

Vous ne pouvez pas utiliser de variables js dans html. Pour ajouter le contenu de la variable javascript au code HTML, utilisez innerHTML () ou créez une balise HTML, ajoutez le contenu de cette variable à la balise créée et ajoutez-la au corps ou à toute autre balise existante du code HTML.

0
Kalyan Kumar S

Les balises HTML que vous souhaitez modifier sont appelées DOM (objet de document à manipuler). Vous pouvez modifier le DOM avec de nombreuses fonctions dans l'objet global de document.

Le meilleur exemple qui fonctionnerait sur presque tous les navigateurs est le document.getElementById, il s'agit d'une recherche de balise HTML avec cet identifiant défini comme attribut.

Il existe une autre option plus simple mais qui ne fonctionne que sur les navigateurs modernes (IE8 +), la fonction querySelector. Elle trouvera le premier élément avec le sélecteur correspondant (sélecteurs CSS).

Exemples pour les deux options:

<script>
var name = Prompt("What's your name?");
var lengthOfName = name.length
</script>
<body>
  <p id="a"></p>
  <p id="b"></p>
  <script>
    document.getElementById('a').innerHTML = name;
document.querySelector('#b').innerHTML = name.length;</script>
</body>

0
InvisibleUn1corn