在以下情况下调用函数 <div> 在JavaScript中被点击

Question

我正在一个网页上工作，该网页应该具有一段文本，该文本块从“ Click Me”更改为“ Ouch！”。 当用户单击块内的任何位置时。 在创建的文本中单击时，无法更改文本。

这是我的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; }

 #clickMe { background-color: blue; border: 2px double black; font-size: larger; }

 <div id="clickMe" onclick="clickMe()"> <p> Click Me </p> </div>

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

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

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

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

 <div id="clickMe" onclick="clickMe()"> <p> Click Me </p> </div>

在以下情况下调用函数 <div> 在JavaScript中被点击

问题描述

演示：

2 个解决方案

解决方案1
1 已采纳 2014-09-26 01:44:47

解决方案2
1 2014-09-26 01:44:49

在以下情况下调用函数 <div> 在JavaScript中被点击

问题描述

演示：

2 个解决方案

解决方案1 1 已采纳 2014-09-26 01:44:47

解决方案2 1 2014-09-26 01:44:49

解决方案1
1 已采纳 2014-09-26 01:44:47

解决方案2
1 2014-09-26 01:44:49