javascript - 在 JavaScript 中单击 <div> 时调用函数

标签 javascript html css onclick

我正在处理一个网页,该网页应该有一个文本 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/

相关文章:

php - 将 JavaScript 变量发送到 PHP 变量

jquery - 具有背景图像和居中内容的 Div

iphone - 平板电脑/移动设备上的数字内容被删除/隐藏

html - 边框和内容之间奇怪的空白

javascript - 如何全局公开一个 es6 模块

javascript - 将数组中的宽度值附加到 td

javascript - Chrome 不会加载 jquery 或 soundcloud api

java - 为什么表单提交会打开新窗口/标签?

css - 如何隐藏HTML5网络播放器throbber(缓冲动画)?

html - 如何更改 twitter bootstrap uib-tab 标签标题的大小和颜色