新人 从书上看到的onload的例子，无效果！！！

时间：2022-12-30 23:31:14
<!DOCTYPE html>
<html>
<head>
<style>
.reveal*{display:none;}
.reveal*.handle{display:block;}
</style>
<script>
window.onload=function(){
var elements = document.getElementsByClassName("reveal");
for(var i=0;i<elements.length:i++){
var elt=elements[i];
var title=elt.getElementsByClassName("handle")[0];
addRevealHandler(title.elt);}
function addRevealHandler(title,elt)
{
title.onclick =function(){
if(elt.className=="reveal")
elt.className="revealed";
else if(elt.className=="revealed")
elt.className="reveal";
}
}
};
</script>
</head>
<body>
<div class="reveal">
<h1 class="handle">Click here to Reveal Hidden Text</h1>
<p>This paragraph is hidden.It appears when you click on the title.</p>
</div>
</body>
</html>

求高手告诉怎么没有onlick的效果。。。

8 个解决方案

#1

先看看浏览器调试工具里有没有报错，然后检查一遍代码，也许会发现点什么（比如elements.length后面应该是分号而不是冒号）。另外，代码还是写的规范些好~~

#2

书上的例子，想说看看效果，完全是照搬下来的。然后就没看到结果。。

#3

不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀 


<!DOCTYPE html>

<html>

<head>

<style>

.reveal *{display:none;}

.reveal *.handle{display:block;}

</style>

<script>

window.onload=function(){

  var elements = document.getElementsByClassName("reveal");

  for(var i=0;i<elements.length;i++){

    var elt=elements[i];

    var title=elt.getElementsByClassName("handle")[0];

    addRevealHandler(title,elt);

  }

};

function addRevealHandler(title,elt){

   title.onclick=function(){

     if(elt.className=="reveal"){

       elt.className="revealed";

     }else if(elt.className=="revealed"){

       elt.className="reveal";

     }

   };

}

</script>

</head>

<body>

<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>

</body>

</html>

#4

引用 3 楼 xiaofanku 的回复:
不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀 


<!DOCTYPE html>

<html>

<head>

<style>

.reveal *{display:none;}

.reveal *.handle{display:block;}

</style>

<script>

window.onload=function(){

  var elements = document.getElementsByClassName("reveal");

  for(var i=0;i<elements.length;i++){

    var elt=elements[i];

    var title=elt.getElementsByClassName("handle")[0];

    addRevealHandler(title,elt);

  }

};

function addRevealHandler(title,elt){

   title.onclick=function(){

     if(elt.className=="reveal"){

       elt.className="revealed";

     }else if(elt.className=="revealed"){

       elt.className="reveal";

     }

   };

}

</script>

</head>

<body>

<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>

</body>

</html>


用工具调过，除了标点错，别的没提示额。。

#5

Quote: 引用 3 楼 xiaofanku 的回复:

不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀

对了下你的，还是没有onclick的效果。。。。

#6

有 这个方法？getElementsByClassName

#7

引用 6 楼 rui888 的回复:
有 这个方法？getElementsByClassName

有,document,element对象都有这个方法

#8

引用 4 楼 myhot3 的回复:
用工具调过，除了标点错，别的没提示额。。

随你怎么说吧。反正是你的错误，

#1

先看看浏览器调试工具里有没有报错，然后检查一遍代码，也许会发现点什么（比如elements.length后面应该是分号而不是冒号）。另外，代码还是写的规范些好~~

#2

书上的例子，想说看看效果，完全是照搬下来的。然后就没看到结果。。

#3

不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀 


<!DOCTYPE html>

<html>

<head>

<style>

.reveal *{display:none;}

.reveal *.handle{display:block;}

</style>

<script>

window.onload=function(){

  var elements = document.getElementsByClassName("reveal");

  for(var i=0;i<elements.length;i++){

    var elt=elements[i];

    var title=elt.getElementsByClassName("handle")[0];

    addRevealHandler(title,elt);

  }

};

function addRevealHandler(title,elt){

   title.onclick=function(){

     if(elt.className=="reveal"){

       elt.className="revealed";

     }else if(elt.className=="revealed"){

       elt.className="reveal";

     }

   };

}

</script>

</head>

<body>

<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>

</body>

</html>

#4

引用 3 楼 xiaofanku 的回复:
不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀 


<!DOCTYPE html>

<html>

<head>

<style>

.reveal *{display:none;}

.reveal *.handle{display:block;}

</style>

<script>

window.onload=function(){

  var elements = document.getElementsByClassName("reveal");

  for(var i=0;i<elements.length;i++){

    var elt=elements[i];

    var title=elt.getElementsByClassName("handle")[0];

    addRevealHandler(title,elt);

  }

};

function addRevealHandler(title,elt){

   title.onclick=function(){

     if(elt.className=="reveal"){

       elt.className="revealed";

     }else if(elt.className=="revealed"){

       elt.className="reveal";

     }

   };

}

</script>

</head>

<body>

<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>


<div class="reveal">

<h1 class="handle">Click here to Reveal Hidden Text</h1>

<p>This paragraph is hidden.It appears when you click on the title.</p>

</div>

</body>

</html>


用工具调过，除了标点错，别的没提示额。。

#5

Quote: 引用 3 楼 xiaofanku 的回复:

不知是图上讲的不对，还是你打的不对。你上面的代码错误处不少呀

对了下你的，还是没有onclick的效果。。。。

#6

有 这个方法？getElementsByClassName

#7

引用 6 楼 rui888 的回复:
有 这个方法？getElementsByClassName

有,document,element对象都有这个方法

#8

引用 4 楼 myhot3 的回复:
用工具调过，除了标点错，别的没提示额。。

随你怎么说吧。反正是你的错误，
标签：

相关文章