How do I use this JavaScript variable in HTML

Question

I m trying to make a simple page that asks you for your name  and then uses name length  JavaScript   to figure out how long your name is   This is my code so far    lt script gt  var name   prompt  What s your name     var lengthOfName   name length  lt  script gt   lt body gt   lt  body gt    I m not quite sure what to put within the body tags so that I can use those variables that I stated before  I realize that this is probably a really beginner level question  but I can t seem to find the answer

User · Answer

The HTML tags that you want to edit is called the DOM (Document object manipulate), you can edit the DOM with many functions in the document global object.

The best example that would work on almost any browser is the document.getElementById, it's search for html tag with that id set as an attribute.

There is another option which is easier but works only on modern browsers (IE8+), the querySelector function, it's will find the first element with the matched selector (CSS selectors).

Examples for both options:

_x000D_

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

_x000D_

User · Answer

You don t  use  JavaScript variables in HTML   HTML is not a programming language  it s a markup language  it just  describes  what the page should look like   If you want to display a variable on the screen  this is done with JavaScript   First  you need somewhere for it to write to    lt body gt       lt p id  output  gt  lt  p gt   lt  body gt    Then you need to update your JavaScript code to write to that  lt p gt  tag   Make sure you do so after the page is ready    lt script gt  window onload   function        var name   prompt  What s your name         var lengthOfName   name length      document getElementById  output   innerHTML   lengthOfName      lt  script gt     x000D   x000D  window onload   function     x000D    var name   prompt  What s your name     x000D    var lengthOfName   name length x000D   x000D    document getElementById  output   innerHTML   lengthOfName  x000D     x000D   lt p id  output  gt  lt  p gt  x000D   x000D   x000D

User · Answer

You can create an element with an id and then assign that length value to that element    x000D   x000D  var name   prompt  What s your name     x000D  var lengthOfName   name length x000D  document getElementById  message   innerHTML   lengthOfName  x000D   lt p id  message  gt  lt  p gt  x000D   x000D   x000D

User · Answer

lt head gt       lt title gt Test lt  title gt   lt  head gt    lt body gt       lt h1 gt Hi there lt span id  username  gt  lt  span gt   lt  h1 gt       lt script gt         let userName   prompt  What is your name            document getElementById  username   innerHTML   userName       lt  script gt   lt  body gt

User · Answer

A good place to start learning how to manipulate pages s the Mozilla Developer Network  they ve got a great tutorial about the DOM   One way you could do it is with document write  which writes html at the end of the currently loaded part of the document - in this case  after the script tag    lt script gt    var name   prompt  What s your name       document write   lt p gt     name length     lt  p gt      lt  script gt    But it s not a very clean way of doing it  Keep document write for testing purpose because in most cases you can t predict where it will append the content   EDIT  Here  the  clever  way would be to do something like this    lt script type  text javascript  gt    window addEventListener  load   function e        var name   prompt  What s your name               var text   document createTextNode name length       document getElementById  nameLength   appendChild text          lt  script gt   lt p id  nameLength  gt  lt  p gt    But people are generally lazy and you ll often see  innerHTML    something  instead of a text node

User · Answer

Try this    lt body gt       lt div id  divMsg  gt  lt  div gt   lt  body gt   lt script gt      var name   prompt  What s your name         var lengthOfName   name length      document getElementById  divMsg   innerHTML    Length      lengthOfName   lt  script gt

User · Answer

You cannot use js variables inside html  To add the content of the javascript variable to the html use innerHTML   or create any html tag  add the content of that variable to that created tag and append that tag to the body or any other existing tags in the html

User · Answer

You can create a  lt p gt  element    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D     lt script gt  x000D    var name   prompt  What s your name     x000D    var lengthOfName   name length x000D    p   document createElement  p    x000D    p innerHTML    Your name is   lengthOfName   characters long    x000D    document body appendChild p   x000D     lt  script gt  x000D     lt body gt  x000D     lt  body gt  x000D     lt  html gt  x000D   x000D   x000D

[javascript] How do I use this JavaScript variable in HTML?

Examples related to javascript

Examples related to html

Examples related to variables