How to print variable from javascript code into html body?

Question

I am trying to create a webpage that will give me the sunrise and sunset times and am using a script I found on GitHub. Below is my code...

<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
	<script src="sun.js"></script>
</head>
<body>

<input type="hidden" id="sunrise" value="" />
<input type="hidden" id="sunset" value="" />

<script>
navigator.geolocator.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').value = sunrise;
document.getElementById('sunset').value = sunset;
</script>

//Want to put code here to print out the value of sunrise/sunset

	
</body>
</html>

How would I go about printing the variable value in the HTML body?

Luvexina · Accepted Answer · 2019-04-11 22:22:46Z

4

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>

I also fixed some syntax errors, and had to replace the <input>s with <div>s so the output could be shown.

answered Apr 11, 2019 at 22:22

Luvexina

84311 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Muhammed Gül · Accepted Answer · 2019-04-11 22:26:11Z

0

You must remove the 2 input lines since you will generate output:

<input type="hidden" id="sunrise" value="" />
<input type="hidden" id="sunset" value="" />

Then you can use paragraphs instead.

<p id="sunrise"></p>
<p id="sunset"></p>

<script>
// your code..
document.getElementById('sunrise').innerHTML = sunrise;
document.getElementById('sunset').innerHTML = sunset;
</script>

answered Apr 11, 2019 at 22:26

Muhammed Gül

89410 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to print variable from javascript code into html body?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related