How do I use this JavaScript variable in HTML?

by

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:

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

Then you need to update your JavaScript code to write to that <p> tag. Make sure you do so after the page is ready.

<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>

More Related Contents:

  1. html form that passes information to a variable in javascript [closed]
  2. Why is the value of my input always empty if I store it in a variable?
  3. Pass vars to JavaScript via the SRC attribute
  4. Javascript variables in HTML attributes
  5. Prepending “http://” to a URL that doesn’t already contain “http://”
  6. browser freezes with this js code, why?
  7. How do I pass a URL as a parameter? [closed]
  8. What should I do to use this webpacked JS library? [closed]
  9. .index() only for one instance of class [closed]
  10. Relative Paths in Javascript in an external file
  11. Call javascript function after script is loaded
  12. Dynamically loading css stylesheet doesn’t work on IE
  13. How can I detect whether an iframe is loaded?
  14. Including both href and onclick to HTML tag
  15. Uploading Multiple Files to Google Drive with Google App Script
  16. Target=’_blank’ to show in new window, NOT new tab, possible?
  17. How is it possible for an iframe to access its parents DOM?
  18. Is it possible to use any HTML5 fanciness to export local storage to Excel?
  19. Convert TD columns into TR rows
  20. Adding a new line in a JSX string inside a paragraph – React
  21. Adding Google Translate to a web site
  22. Specify parent divs opacity but make it not affect children HTML elements
  23. Changing the URL without reloading the page
  24. Can you target an elements parent element using event.target?
  25. Scroll Position of div with “overflow: auto”
  26. angularjs custom filter to check for values inside a data array
  27. How to get an element’s padding value using JavaScript?
  28. Connecting to remote SSH server (via Node.js/html5 console)
  29. JavaScript – Get size in bytes from HTML img src
  30. True Isometric Projection with HTML5 Canvas

Leave a Comment