js清空div里的数据问题

最新推荐文章于 2021-06-03 10:27:56 发布

原创最新推荐文章于 2021-06-03 10:27:56 发布 · 4.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#js清空div里的数据问题

JavaScript 专栏收录该内容

16 篇文章

订阅专栏

在JavaScript开发中，作者遇到了一个细节问题，即使用JS清空div内的数据时未能生效。问题出在函数名`clear()`，这可能是一个JavaScript保留字，导致功能无法正常工作。改用`text_clear()`函数后问题解决。

近期做开发，遇到很有意思的细节问题。

如题，即用js清空div里的数据，本来是件很简单的事情，结果因为个小细节，浪费了一些时间，写出来希望能帮到遇到类似问题的人。

一、先上有问题代码

1.html代码

<body>
<div class="check_container" id="div_check_container">
  <div class="check_container_top" id="div_check_container_top">数据测试</div>
  <div class="check_container_middle" id="div_check_container_middle"><input type="button" id="btn_check_start" name="btn_check_start" value="开始测试" onClick="start_check()"><input type="button" id="clear" onClick="clear()" value="清空数据"></div>
  <div class="check_container_bottom" id="div_check_container_bottom">显示数据</div>
</div>
</body>

2.js代码

	//清空数据函数
	function clear(){
		//window.alert("clicked");


		 var element_div = document.getElementById("div_check_container_bottom");
		  //window.alert("element_div"+element_div);
		  element_div.innerHTML = "";
		}

如上：在点击清空数据按钮之后是无法实现清空数据效果的，代码逻辑是没有问题的，只是我的函数名有点小问题，clear（）。这个函数名可能是js保留的，因此实现不了。

后我改为如下text_clear就行了

	//清空数据函数
	function text_clear(){
		//window.alert("clicked");


		 var element_div = document.getElementById("div_check_container_bottom");
		  //window.alert("element_div"+element_div);
		  element_div.innerHTML = "";
		}

继续开发。。