为什么没有输出九九乘法表?

下面的程序本来想输出九九乘法表到屏幕上,为什么没有输出呢?怎样修改?

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>我的HTML练习</title>

<!--preload-links-->

<!--app-context-->

</head>

<body>

<div id="jiujiubiao">

<script>

for(var a=1;a<=9; a++){

for(var b=1;b<=a;b++){

document.write(b+"*"+a+"="+a*b+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp");

}

document.write("<br />")

}

</script>

</div>

</body>

</html>

经过查询,解决办法如下:

你的程序没有打印内容的原因是因为你将九九乘法表的内容写在了<script>标签内部,而应该将它写在<div>标签内部。

请将<script>标签内的代码移动到<div>标签内的位置,然后再运行程序。

修改后的代码如下所示:

复制代码
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的HTML练习</title>
		<!--preload-links-->
		<!--app-context-->
	</head>
	<body>
		<div id="jiujiubiao">
			<script>
			for(var a=1;a<=9; a++){
				for(var b=1;b<=a;b++){
					document.write(b+"*"+a+"="+a*b+"&nbsp"+"&nbsp"+"&nbsp"+"&nbsp");
				}
				document.write("<br />")
			}	
			</script>
		</div>
	</body>
</html>

上面说的要移动到<div>内部,实际给出的结果却没有移动出来。你试试看。

实际上,问题的原因是<script/>放置的位置不对,应该在<head>内部,放在其他地方的《script》会被解释器忽略。

修改办法是将JavaScript代码放在页面加载完成后执行,可以将代码放在<body>标签的末尾,或者使用window.onload事件来确保页面加载完成后再执行JavaScript代码。可以将你的代码修改为以下形式:

<html>

<head>

<meta charset="utf-8" />

</head>

<body> <div id="jiujiubiao"></div>

<script> window.onload = function () { var div = document.getElementById("jiujiubiao"); for (var a = 1; a <= 9; a++) { for (var b = 1; b <= a; b++) { div.innerHTML += b + "*" + a + "=" + a * b + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp"; } div.innerHTML += "<br />"; } } </script> </body> </html>

这样修改后,页面加载完成后,JavaScript代码会将结果输出到id为jiujiubiao的div中。

相关推荐
无心水9 小时前
22、Java开发避坑指南:日期时间、Spring核心与接口设计的最佳实践
java·开发语言·后端·python·spring·java.time·java时间处理
188号安全攻城狮9 小时前
【前端安全】Trusted Types 全维度技术指南:CSP 原生 DOM XSS 防御终极方案
前端·安全·网络安全·xss
Hello.Reader10 小时前
双卡 A100 + Ollama 最终落地手册一键部署脚本、配置文件、预热脚本与 Python 客户端完整打包
开发语言·网络·python
cch891810 小时前
汇编VS C++:底层控制与高效开发之争
java·开发语言
墨渊君10 小时前
从 0 到 1:用 Node 打通 OpenClaw WebSocket 通信全流程
前端·openai·agent
lifewange10 小时前
代码托管平台
开发语言
yangyanping2010810 小时前
Go语言学习之配置管理库Viper
开发语言·学习·golang
橘子编程10 小时前
UniApp跨端开发终极指南
开发语言·vue.js·uni-app
冬至喵喵10 小时前
构建 CLI 的 Python 框架:Typer技术介绍
开发语言·chrome·python
Novlan110 小时前
一个油猴脚本,解决掘金编辑器「转存失败」的烦恼
前端