我正在处理一个网页,该网页应该包含一个文本块,该文本会从" Click Me"哎哟!"哎哟!"当用户点击块内的任何位置时。当我点击我创建的内容时,我无法更改文本。
这是我的html文件,其中还包含一些CSS和Javascript:
<html>
<head>
<title>Exam 1 Tanner Taylor</title>
<h1>Exam 1 Tanner Taylor</title>
<style type="text/css">
#clickMe {
background-color: blue;
border: 2px double black;
font-size: larger;
}
</style>
<script type = "text/javascript">
function clickMe() {
var TTclick = document.getElementById("clickMe");
return TTclick;
}
</script>
</head>
<body>
<div id="clickMe" onclick="clickMe()">
<p>
Click Me
</p>
</div>
</body>
</html>
在编写本文时,块正确地显示为背景颜色,边框和原始文本,但是当我在块内部单击时没有任何反应。我在浏览器上检查了调试器,但我没有收到任何错误。我想我要么不使元素可点击,要么没有正确调用clickMe()函数我是如何在该部分中编写的。
有人愿意指出我正确的方向吗?
function clickMe() {
var TTclick = document.getElementById("clickMe");
return TTclick;
}
&#13;
#clickMe {
background-color: blue;
border: 2px double black;
font-size: larger;
}
&#13;
<div id="clickMe" onclick="clickMe()">
<p>
Click Me
</p>
</div>
&#13;
答案 0 :(得分:1)
您正在尝试设置div的值,但您要做的是设置其innerhtml。
function clickMe() {
document.getElementById("clickMe").innerHTML = "Ouch!";
}
无需设置变量或返回它们。另外,我会丢失你的clickMe div中的段落标记。
答案 1 :(得分:1)
最有可能的是,在文本外部单击,不会注册为单击DOM元素。
删除div中的段落标记并保留文本,或添加此CSS:
div#clickMe > p {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
下面,您将找到一个简单的演示。
function clickMe() {
toggle("div#clickMe>p", "Click Me", "Ouch!");
}
function toggle(selector, defaultText, alternateText) {
var element = document.querySelector(selector);
var text = element.innerHTML
element.innerHTML = text == defaultText ? alternateText : defaultText;
}
&#13;
div#clickMe {
background-color: blue;
border: 2px double black;
font-size: larger;
}
div#clickMe>p {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
&#13;
<div id="clickMe" onclick="clickMe()">
<p>
Click Me
</p>
</div>
&#13;