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

时间:2014-09-26 01:38:02

标签: javascript html css onclick

我正在处理一个网页,该网页应该包含一个文本块,该文本会从&#34; Click Me&#34;哎哟!&#34;哎哟!&#34;当用户点击块内的任何位置时。当我点击我创建的内容时,我无法更改文本。

这是我的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()函数我是如何在该部分中编写的。

有人愿意指出我正确的方向吗?

演示:

&#13;
&#13;
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;
&#13;
&#13;

2 个答案:

答案 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;
}

下面,您将找到一个简单的演示。

&#13;
&#13;
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;
&#13;
&#13;