document.getElementById("myBtn").onclick=function(){displayDate()};解析

最新推荐文章于 2024-05-05 03:05:28 发布
最新推荐文章于 2024-05-05 03:05:28 发布
阅读量1.3w 收藏 10
点赞数 3
分类专栏： hot 文章标签： html js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39081464/article/details/81042332
版权
首先我们先来看看下面的三个例子，然后我们将这三个例子进行比较（看仔细哦！）
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
</head>
<body>
    <p>点击按钮执行 <em>displayDate()</em> 函数.</p>
    <button onclick="displayDate()">点这里</button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    </script>
    <p id="demo"></p>
</body>
</html> 
 

 
 
 
  <! 
  DOCTYPE html 
  > 
 
 
 
 
  < 
  html 
  > 
 
 
 
 
  < 
  head 
  > 
 
 
 
 
       
  < 
  meta 
    
  charset 
  = 
  "utf-8" 
  > 
 
 
 
 
       
  < 
  title 
  > 
  菜鸟教程(runoob.com) 
  </ 
  title 
  > 
 
 
 
 
  </ 
  head 
  > 
 
 
 
 
  < 
  head 
  > 
 
 
 
 
  </ 
  head 
  > 
 
 
 
 
  < 
  body 
  > 
 
 
 
 
       
  < 
  p 
  > 
  点击按钮执行  
  < 
  em 
  > 
  displayDate() 
  </ 
  em 
  > 
   函数. 
  </ 
  p 
  > 
 
 
 
 
       
  < 
  button 
    
  id 
  = 
  "myBtn" 
  > 
  点这里 
  </ 
  button 
  > 
 
 
 
 
       
  < 
  script 
  > 
 
 
 
 
           
  document 
  . 
  getElementById 
  ( 
  "myBtn" 
  ). 
  onclick 
   =  
  function 
  () {  
  displayDate 
  ()}; 
 
 
 
 
           
  function 
    
  displayDate 
  () { 
 
 
 
 
               
  document 
  . 
  getElementById 
  ( 
  "demo" 
  ). 
  innerHTML 
   =  
  Date 
  (); 
 
 
 
 
          } 
 
 
 
 
       
  < 
  / 
  script 
  > 
 
 
 
 
       
  < 
  p 
    
  id 
  = 
  "demo" 
  ></ 
  p 
  > 
 
 
 
 
  </ 
  body 
  > 
 
 
 
 
  </ 
  html 
  > 
 
 

 

 

 
 
 
  <! 
  DOCTYPE html 
  > 
 
 
 
 
  < 
  html 
  > 
 
 
 
 
  < 
  head 
  > 
 
 
 
 
       
  < 
  meta 
    
  charset 
  = 
  "utf-8" 
  > 
 
 
 
 
       
  < 
  title 
  > 
  菜鸟教程(runoob.com) 
  </ 
  title 
  > 
 
 
 
 
  </ 
  head 
  > 
 
 
 
 
  < 
  head 
  > 
 
 
 
 
  </ 
  head 
  > 
 
 
 
 
  < 
  body 
  > 
 
 
 
 
       
  < 
  p 
  > 
  点击按钮执行  
  < 
  em 
  > 
  displayDate() 
  </ 
  em 
  > 
   函数. 
  </ 
  p 
  > 
 
 
 
 
       
  < 
  button 
    
  id 
  = 
  "myBtn" 
  > 
  点这里 
  </ 
  button 
  > 
 
 
 
 
       
  < 
  script 
  > 
 
 
 
 
           
  var 
    
  x 
   =  
  function 
    
  displayDate 
  () { 
 
 
 
 
               
  document 
  . 
  getElementById 
  ( 
  "demo" 
  ). 
  innerHTML 
   =  
  Date 
  (); 
 
 
 
 
          } 
 
 
 
 
           
  document 
  . 
  getElementById 
  ( 
  "myBtn" 
  ). 
  onclick 
   =  
  x 
  ; 
 
 
 
 
       
  < 
  / 
  script 
  > 
 
 
 
 
       
  < 
  p 
    
  id 
  = 
  "demo" 
  ></ 
  p 
  > 
 
 
 
 
  </ 
  body 
  > 
 
 
 
 
  </ 
  html 
  > 
 
 

 

 


  相似点：以上代码都可实现同样的功能。 

 

 

解析：相信认真看过代码的朋友，都能找出三者的不同点。第二个和第三个的区别就是，第二个在 displayDate() 函数外嵌套了一层匿名函数，第三个把 displayDate() 的函数名赋给了变量 x（重点：可以理解为把 displayDate() 函数的 指针(引用) 传给了 x） ，然后再将 x 赋给了document.getElementById  ("myBtn").onclick 事件属性，然后通过点击事件触发 onclick 指向的 displayDate() 函数，就    实现了相同的功能。
 

 
 
 

 

 
 细节：你们可以把第一个中 onclick 事件属性机制了解下。 

 

 

 
 我的理解：onclick 事件属性底层代码是这么实现的，先将赋给  onclick 事件属性的值（字符串"displayDate()"）转换成函数，再将函数的指针(引用)传给 onclick 事件属性，然后完成对函数的调用，这样就好理解二和三这么写原因了。 

 

 
 
 

 

以上纯属个人理解，如果有什么错误的地方，请指出，将万分感激

                

        

        

    




    

      

        

            

              
                
                  qq_1073221564
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                    3
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    10
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
displayDate显示时间

				
			

			

				

					qq_51213025的博客
				

				

					01-20
					
					2513
					
				

			

		

		

			
				
displayDate显示时间
    <h1>姜云升</h1>
    <p id="demo">点击切换当前时间</p>
    <button  type="button" onclick="displayDate()">显示时间</button>
    
    <script>
        function displayDate() {
            document.getElementById

			
		

	



                

              
                



	

		

			

				
					
各浏览器对document.getElementById等方法的实现差异解析

				
			

			

				

					09-04
				

			

		

		

			
				
 var $ = document.getElementById.bind(document);  ```  需要注意的是，`bind`方法在IE9及更高版本、Firefox、Chrome等现代浏览器中才被支持。  除了`getElementById`之外，其他一些与`document`或`window`对象...

			
		

	



                


  
              

                


	

		

			

				
					
document.getElementById("id").onclick=tt

				
			

			

				

					小倪的专栏
				

				

					08-03
					
					5844
					
				

			

		

		

			
				
function tt(){
alert("测试");
}
 
 
 
document.getElementById("id").onclick=tt; //tt函数不要加（）
 
//也可以这样
document.getElementByid("id").onclick=function tt(){
        alert("测试");
}

			
		

	





	

		

			

				
					
Dom（六） 事件操作

					
最新发布

				
			

			

				

					2401_84092169的博客
				

				

					05-05
					
					660
					
				

			

		

		

			
				
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

			
		

	



		

			
		



	

		

			

				
					
document.getElementById("addUser").onclick=function(){

				
			

			

				

					云计算?
				

				

					01-31
					
					1831
					
				

			

		

		

			
				
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8&qu

			
		

	





	

		

			

				
					
JavaScript document.getElementById(“id“).onclick=tt 函数中带参数

				
			

			

				

					qq_38394249的博客
				

				

					02-25
					
					1705
					
				

			

		

		

			
				
html：
<input type="button" id="Button" name="Button" value="button" />

js:
document.getElementById('Button').onclick = validata;
function validata() {
	alert("我被调用了");
}

这样只能代用无参的函数
想要调用有参的,参考了
document.getElementById('Button').onclick = function (

			
		

	





	

		

			

				
					
document.getElementByID('btn').click();

				
			

			

				

					十年之约
				

				

					02-02
					
					1万+
					
				

			

		

		

			
				
<input type='button' id='btn' onclick='setoption()' />
document.getElementByID('btn').click();

			
		

	





	

		

			

				
					
document.getElementById(id)的隐藏与显示

				
			

			

				

					stackoverflow
				

				

					08-27
					
					1万+
					
				

			

		

		

			
				
var n = 1;
function $(id){
return document.getElementById(id);
}
function show_child(){
if(n==1){
//alert(n);
$("rwgl").style.display="none";
n = n-1;
}
else {
//alert("");
$("rwgl").sty

			
		

	





	

		

			

				
					
TypeError document.getElementById(...) is null错误原因

				
			

			

				

					09-03
				

			

		

		

			
				
`TypeError: document.getElementById(...) is null` 是一个常见的JavaScript错误，通常出现在尝试访问一个尚未加载或者不存在于DOM（文档对象模型）中的元素时。这个错误表示`document.getElementById`方法未能找到...

			
		

	





	

		

			

				
					
js中document.getElementByid、document.all和document.layers区分介绍

				
			

			

				

					10-28
				

			

		

		

			
				
在这个话题中，我们将深入探讨三个在JavaScript历史中起到重要作用的属性：`getElementById`，`document.all`，以及`document.layers`。  首先，`getElementById`是W3C定义的DOM Level 1标准方法，它根据指定的ID值...

			
		

	





	

		

			

				
					
一行代码告别document.getElementById

				
			

			

				

					12-03
				

			

		

		

			
				
当初那种直接访问id的方法，逐渐被document.getElementById所替代。如果这年头还在用id访问元素，要么就是做程序里的内嵌网页，要么就是像铁道部那样的超境界仿古网站：） 当然只要保证你的用户都是用ie访问，这样的...

			
		

	





	

		

			

				
					
浅谈vue中document.getElementById()拿到的是原值的问题

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了浅谈vue中document.getElementById()拿到的是原值的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

			
		

	





	

		

			

				
					
JavaScript案例--显示日期

				
			

			

				

					湫湫的博客
				

				

					07-05
					
					116
					
				

			

		

		

			
				
JavaScript案例--显示日期

来自菜鸟教程
开发软件：VSCode

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜单教程(runoob.com)</title>
        <script>
            function displayDate(){
                

			
		

	





	

		

			

				
					
OJ 1.O

				
			

			

				

					u012369069的专栏
				

				

					06-24
					
					823
					
				

			

		

		

			
				
/*
Description
设计一个日期类和时间类，编写display函数用于显示日期和时间。要求：display函数作为类外的普通函数，分别在Time和Date类中将display声明为友元函数。在主函数中调用display函数，display函数分别引用Time和Date两个类的对象的私有数据，输出年、月、日和时、分、秒。


 


Input
年、月、日和时、分、秒


			
		

	





	

		

			

				
					
11.将例3.13中的Time类声明为Date类的友元类，通过Time类中的display函数引用Date类对象的私有数据，输出年、月、日和时、分、秒。

					
热门推荐

				
			

			

				

					qq_41680042的博客
				

				

					05-25
					
					2万+
					
				

			

		

		

			
				
#include <iostream>
using namespace std;
//class 中使用了void display(Date&);需要对date提前引用声明
class Date;
//定义time类
class Time
{
    public:
        Time(int, int, int);
        //成员函数，形参是date的引用
        void display(Date&);
    private:
       ...

			
		

	





	

		

			

				
					
document.getElementById(I).style.display=““不起作用

				
			

			

				

					w710537643的博客
				

				

					01-05
					
					5036
					
				

			

		

		

			
				
console.log("INTP")
    var tag = document.getElementById("INTP");
    console.log(tag)
    tag.style.display = "";
    console.log(tag.style.display)


console.log("INTP")
    var tag = document.getElementById("INTP");
    console.log(tag)
    tag.style.d

			
		

	





	

		

			

				
					
javascript----显示日期

				
			

			

				

					qq_15693347的博客
				

				

					09-10
					
					503
					
				

			

		

		

			
				
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}




我的第一个 JavaScript 程序
这是一个段落

显示日期

			
		

	





	

		

			

				
					
javascript/js点击事件显示日期的效果

				
			

			

				

					月影WEB的博客
				

				

					04-17
					
					1986
					
				

			

		

		

			
				
我们先看看JS代码和效果图

代码如下：





按F12预览效果图如下：





点击“显示日期”按钮之后出现的效果图如下：



下面我们来讲解下这个JS：

JS部分


<script>

function displayDate()//申明一个JS叫做displayDate()的方法

{

document.getElementById("yue").innerHTML=Date();

//这段表示从整个文档获取元素里面id样式名字为yue的标签，然后把JS内置时间函数Date

			
		

	





	

		

			

				
					
web前端之css值控制标签的显示与隐藏、getElementById、document、visibility、display、hidden、style

				
			

			

				

					软件毕设协助及软件开发、IT、程序、编程、程序员、写代码、工程师、互联网、物联网、技术栈、软件开发、硬件开发、计算机科技、智慧电子模块。
				

				

					06-26
					
					1686
					
				

			

		

		

			
				
web前端之css值控制标签的显示与隐藏、getElementById、document、visibility、display、hidden、style

			
		

	





	

		

			

				
					
 javscript 修改代码 统计以下值是0的个数  var sel1 = document.getElementById("s50").value;
  var sel2 = document.getElementById("s11").value;
  var sel3 = document.getElementById("s12").value;
  var sel4 = document.getElementById("s14").value;
  var sel5 = document.getElementById("s51").value;
  var sel6 = document.getElementById("s19").value;
  var sel7 = document.getElementById("s20").value;
  var sel8 = document.getElementById("s21").value;
  var sel9 = document.getElementById("s22").value;
  var sel10 = document.getElementById("s23").value;
  var sel11 = document.getElementById("s24").value;
  var sel12 = document.getElementById("s25").value;
  var sel13 = document.getElementById("s26").value;
  var sel14 = document.getElementById("s27").value;
  var sel15 = document.getElementById("s28").value;
  var sel16 = document.getElementById("s52").value;
  var sel17 = document.getElementById("s40").value;
  var sel18 = document.getElementById("s41").value;
  var sel19 = document.getElementById("s42").value;
  var sel20 = document.getElementById("s46").value;
  var sel21 = document.getElementById("s53").value;

				
			

			

				

					07-22
				

			

		

		

			
				
你可以使用以下的JavaScript代码来统计这些值为0的个数：

```javascript
var sel1 = document.getElementById("s50").value;
var sel2 = document.getElementById("s11").value;
var sel3 = document.getElementById("s12").value;
var sel4 = document.getElementById("s14").value;
var sel5 = document.getElementById("s51").value;
var sel6 = document.getElementById("s19").value;
var sel7 = document.getElementById("s20").value;
var sel8 = document.getElementById("s21").value;
var sel9 = document.getElementById("s22").value;
var sel10 = document.getElementById("s23").value;
var sel11 = document.getElementById("s24").value;
var sel12 = document.getElementById("s25").value;
var sel13 = document.getElementById("s26").value;
var sel14 = document.getElementById("s27").value;
var sel15 = document.getElementById("s28").value;
var sel16 = document.getElementById("s52").value;
var sel17 = document.getElementById("s40").value;
var sel18 = document.getElementById("s41").value;
var sel19 = document.getElementById("s42").value;
var sel20 = document.getElementById("s46").value;
var sel21 = document.getElementById("s53").value;

var count = 0;

if (sel1 == 0) {
  count++;
}
if (sel2 == 0) {
  count++;
}
if (sel3 == 0) {
  count++;
}
if (sel4 == 0) {
  count++;
}
if (sel5 == 0) {
  count++;
}
if (sel6 == 0) {
  count++;
}
if (sel7 == 0) {
  count++;
}
if (sel8 == 0) {
  count++;
}
if (sel9 == 0) {
  count++;
}
if (sel10 == 0) {
  count++;
}
if (sel11 == 0) {
  count++;
}
if (sel12 == 0) {
  count++;
}
if (sel13 == 0) {
  count++;
}
if (sel14 == 0) {
  count++;
}
if (sel15 == 0) {
  count++;
}
if (sel16 == 0) {
  count++;
}
if (sel17 == 0) {
  count++;
}
if (sel18 == 0) {
  count++;
}
if (sel19 == 0) {
  count++;
}
if (sel20 == 0) {
  count++;
}
if (sel21 == 0) {
  count++;
}

if (count > 0) {
  console.log("不合格");
} else {
  console.log("合格");
}
```

上述代码会遍历每个选择框的值，通过逐个判断是否为0来统计个数。最后根据个数的结果输出"不合格"或"合格"。你可以将这段代码添加到你的JavaScript文件中，或者直接在浏览器的开发者工具中执行。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值