如何在文本区域中使用 onclick [关闭]答案

【问题标题】：How to use onclick with a textarea [closed]如何在文本区域中使用 onclick [关闭]
【发布时间】：2018-04-06 01:25:41
【问题描述】：

我希望能够在用户单击文本区域时弹出一个 div。代码：

CSS：

#comment{
    width: 500px;
    height:500px;
    background-color: black;
    position: fixed;
    left: 250px;
    top: 250px;
    float: left;
    display: none;
}

JS：

function comment() {
            if (document.getElementById('comment').style.display = 'none') {
                document.getElementById('comment').style.display = "inline";
                document.getElementById('container').style.opacity = opacity = 0.1;
            }

        }

HTML：

<input type="text" id="textarea" value="Comment..." style="color: #808080;" onclick="comment();">
<div id="comment"></div>

在阅读了下面的 3 个 cmets 之后，我已经解决了我的问题，但现在我希望 div id="comment" 在中间弹出（它有），而它后面的所有内容都淡出。

上面的代码让一切都消失了。 div id="comment" 在#container 中，但有没有办法阻止它随着所有内容消失？

【问题讨论】：

我们也需要看看脚本。
请设置fiddle 以便我们可以复制。也分享你的调试工作。

标签： javascript html css

【解决方案1】：

您忘记了style 属性值末尾的"。因此，onclick 属性名称被视为style 属性值的一部分。

如果你使用了a validator，就会被选中。

【讨论】：

【解决方案2】：

<input type="text" id="textarea" value="Comment..." style="color: #808080; onclick="comment();">

您在style="color: #808080; 之后缺少结束语

顺便说一句，这里的代码荧光笔向我指出了这一点。如果您正在使用任何一种带有语法高亮功能的程序员编辑器，它也会向您指出这一点。

【讨论】：

【解决方案3】：

您的代码中有很多错误。

" @Quentin 提到的
您需要使用getComputedStyle 获取实际样式。
document.getElementById('comment').style.display == ""; 毫无意义。您需要使用= 而不是==，并且需要指定正确的显示'block'。

代码

function comment() {
    var comment = document.getElementById('comment');
    if (getComputedStyle(comment).display == 'none') {
        comment.style.display = 'block';
    }   
}

http://jsfiddle.net/tarabyte/uvnhtmtv/

【讨论】：

谢谢，这对我有用。我只学了三天的javascript，所以我还是很差。