我需要使div中的make元素在单击div时显示和消失。然后加载网页时，应该只说“单击此处”。单击后，新文本应显示“再次单击此处”。再次单击后，新文本显示在该文本下，并显示“再次单击”。再次单击后，所有这些文本将被删除，并显示新文本，表示“谢谢”。再次单击后，该文本将被删除，并显示新文本“再见”。再次单击后，所有内容都将被删除，包括文本出现的框。我对此并不陌生，也不知道自己在做什么，并且当div出现时，我什至无法弹出警告消息单击，似乎应该很简单。这是我的html代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="project4.css">
<script src="prototype.js" type="text/javascript"></script>
<script src="project4.js" type="text/javascript"></script>
</head>
<body>
<div id="main" class="box">
<p id="clickHere">Click here</p>
<p id="clickHereAgain">Click here again</p>
<p id="clickOnceMore">Click once more</p>
<p id="thankYou">Thank you</p>
<p id="goodbye">Goodbye</p>
</div>
</body>
</html>
我的JavaScript代码只是试图使警报弹出：
$(document).ready(function(){
$("div").click(function(){
alert("The paragraph was clicked.");
});
});
以及我的CSS代码：
.box {
background-color: green;
color: white;
width: 300px;
height: 200px;
padding: 10px;
text-align: center;
font-size: 30px;
}
对于初学者，请为div及其所有子级设置一个点击观察器：
$("div").observe('click', myHandler)
然后您可以使用event.target获取被单击的段落。