HTML中onclick="write()"后页面空白

最新推荐文章于 2023-11-25 10:41:29 发布

带上一无所知的我

最新推荐文章于 2023-11-25 10:41:29 发布

阅读量735

点赞数 2

分类专栏：前端文章标签： js dom javascript

本文链接：https://blog.csdn.net/weixin_37840904/article/details/105970993

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

onclick调用js的wirte方法后页面空白

昨天呀，女盆友又问了一个奇怪的问题——

“喂，狗子，这个HTML页面怎么变成空白了，跟菜鸟教程上说的不一样啊！”

我——“？？？”
在这里插入图片描述
废话不多说，我去学习了，不然都不配有女盆友。。。

修炼之后，又悟到真谛啦，斯国一。。。
在这里插入图片描述

结论贴出来先

为DOM添加onclick方法时，默认会调用document的方法，即使不添加document.这个前缀

<button onclick="write()"></button>
<!-- 该语句表示在onclick中执行语句document.write()，而不是添加一个onclick事件监听，监听函数为你自己在js中写的write()方法。

废话不多说，上代码

<!DOCTYPE html>
<html>
<head>
	<title>家有小可爱</title>
</head>
<script type="text/javascript">
	function write() {
		console.log('this is write')
		document.write('<p>document.write finished</p>')
	}
</script>
<body>
<h1>this is h1</h1>
<button onclick="write()">write</button>
</body>
</html>

渲染的页面是这样的
在这里插入图片描述

点击write执行了document.write('<p>document.write finished</p>')后，是这样的
在这里插入图片描述
直接变空白，title没有了，console.log输出也没有，element元素全部被清空。妈耶，有鬼呀

把函数名改成write1，一切正常，界面非空白，元素存在，console.log有输出
在这里插入图片描述
这是怎么回事？？？黑人问号脸

猜想：

onclick中是可以执行js语句的，比如直onclick="console.log(123)"，这样点击后，控制台会直接输出123，
而document中有一个wirte方法，前面的例子看起来就像主动调用了document.wirte(“”)，即往DOM中写入空一样——这样页面当然是空白了，而且也没有执行输出语句。
DOM中onclick中填入方法名如果与document对象的方法相同时，默认会调用document的相关方法，且不用加document.

证明：

在控制台中直接输入document.，可以看见它有clear这个方法
在这里插入图片描述
把write替换为clear后，界面没有任何反应，也没有日志输出，说明它默认调用了document.clear方法。

结论：

为DOM添加onclick方法时，默认会调用document的方法，即使不添加document.这个前缀

<button onclick="write()"></button>
<!-- 该语句表示在onclick中执行语句document.write()，而不是添加一个onclick事件监听，监听函数为你自己在js中写的write()方法。

带上一无所知的我

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML中onclick="write()"后页面空白

onclick调用js的wirte方法后页面空白结论贴出来先猜想：证明：结论：昨天呀，女盆友又问了一个奇怪的问题——“喂，狗子，这个HTML页面怎么变成空白了，跟菜鸟教程上说的不一样啊！”我——“？？？”废话不多说，我去学习了，不然都不配有女盆友。。。修炼之后，又悟到真谛啦，斯国一。。。结论贴出来先为DOM添加onclick方法时，默认会调用document的方法，即使不添加d...
复制链接

扫一扫