How to Output a Variable from JavaScript to HTML

How do I use this JavaScript variable in HTML?

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>

How to print variable from javascript code into html body?

Instead of .value, use .innerHTML.

<!doctype HTML><html lang="en"><head> <script src="sun.js"></script></head><body>
<div id="sunrise"></div><div id="sunset"></div><script>navigator.geolocation.getCurrentPosition(function(position) { sunrise = new Date().sunrise(position.coords.latitude, position.coords.longitude); sunset = new Date().sunset(position.coords.latitude, position.coords.longitude);})
document.getElementById('sunrise').innerHTML = sunrise;document.getElementById('sunset').innerHTML = sunset;</script>
</body></html>

How to output a variable in a javascript function to text in html

Variable rnd in not defined.

 var clicks = 0;
  function random(){    if (clicks > 21) {      alert("You Got To 22! You Lose! Please Try Again!");      location.reload();    }
    clicks += Math.floor(Math.random() * 6) + 1;//        document.getElementById('clicks').value = rnd; You have not define this rnd and using this which throws error.  document.getElementById("clicks").innerHTML = clicks;
};

</div>
<div>
<p id="game"></p>
  </div>




<input type="image" value="clicks" onclick="random()" src="http://pluspng.com/img-png/black-and-white-dice-png-black-white-dice-bunco-clip-art-dice-images-free-900.jpg" alt="Dice2" width="450" height="280">  
  Total Count: <a id="clicks">0</a>
</body>
</html>

How do I output a variable from JavaScript to HTML

You need to have an HTML element (like a paragraph) where you want to display the amount.

If you give the element an id attribute with the value "my-paragraph", then your script can get the element like myParagraph = document.getElementById("my-paragraph").

Then you can change the content of the element like myParagraph.textContent = myAmount.

Begin your learning journey on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction

how to print javascript variable to html tags

Most likely, your JavaScript is executing before the DOM has loaded, so document.getElementById("header2") throws an error, hence why your script won't work.

You can ensure that the DOM has been loaded before you execute JavaScript by wrapping it in an onload event, like this:

window.onload = function(){
    // Do something
}

Another option is to put your script element below your body element, so that the script isn't run until everything above it is loaded. I recommend always doing this so that the page isn't "locked up" waiting for your JavaScript to load, but it's not necessarily a future-proof way of ensuring that the DOM has been loaded. I don't think any current browsers do this, but one in the future may not load the DOM from top to bottom, which would break your script.

So my suggestion is to structure your HTML file something like this:

<body>
<h2 id="header"></h2>
</body>
<script>
window.onload = function(){
    var str = "test";
    document.getElementById("header2").innerHTML = str;
}
</script>

Output a variable from javascript into a HTML table of costs

I guess the reason why it's not showing is because the order that you declared the variables. Try this

var revenue = parseFloat(prompt("what is the revenue?"));
document.getElementById('grandeMocha').innerHTML = revenue