Question

我正在尝试创建一个网页，该网页将为我提供日出和日落时间，并使用在GitHub上找到的脚本。下面是我的代码...

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

我该如何在HTML正文中打印变量值？

Answer 1

使用.value代替.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>

我还修复了一些语法错误，并用<input>替换了<div>，以便显示输出。

Answer 2

由于要生成输出，因此必须删除2条输入行：

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

然后您可以使用段落代替。

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

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

如何将变量从javascript代码打印到html主体中？

2 个答案: