我正在处理一个网页,该网页应该有一个文本 block ,该文本 block 从“点击我”变为“哎哟!”当用户单击 block 内的任意位置时。当我在我创建的内容中单击时,我无法更改文本。
这是我的 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>
正如本文所写,该 block 在背景颜色、边框和原始文本方面显示正确,但是当我在 block 内单击时没有任何反应。我检查了浏览器上的调试器,但没有收到任何错误。我在想我要么没有让元素可点击,要么 clickMe() 函数没有被正确调用,就像我在本节中写的那样。
有人愿意为我指出正确的方向吗?
演示:
function clickMe() {
var TTclick = document.getElementById("clickMe");
return TTclick;
}
#clickMe {
background-color: blue;
border: 2px double black;
font-size: larger;
}
<div id="clickMe" onclick="clickMe()">
<p>
Click Me
</p>
</div>
最佳答案
您正在尝试设置 div 的值,但您想要做的是设置它的 innerhtml。
function clickMe() {
document.getElementById("clickMe").innerHTML = "Ouch!";
}
无需设置变量或返回它们。另外,我会丢失您的 clickMe div 中的段落标记。
关于javascript - 在 JavaScript 中单击 <div> 时调用函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26050728/