Question

我正在处理一个网页，该网页应该包含一个文本块，该文本会从＆＃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;

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;

Answer 1

您正在尝试设置div的值，但您要做的是设置其innerhtml。

function clickMe() {
            document.getElementById("clickMe").innerHTML = "Ouch!";
        }

无需设置变量或返回它们。另外，我会丢失你的clickMe div中的段落标记。

Answer 2

最有可能的是，在文本外部单击，不会注册为单击DOM元素。

删除div中的段落标记并保留文本，或添加此CSS：

div#clickMe > p {
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

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

＆＃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;

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

演示：

2 个答案: