首页 > 解决方案 > 转义脚本以隐藏/显示 textarea

问题描述

我需要单击按钮以显示文本区域,以便用户可以在上传图像或文本消息之间进行选择。当我运行页面时,我可以看到隐藏/可见元素启动,但它不会保持在新状态。它会立即恢复到最初设置的状态。

我猜我没有正确地转义脚本。有什么想法吗?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">

</header>

<body>
    <div id="PostContainer"><br>
        <textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
    
        <form class="UploadButtonContainer">
            <button id="textbutton" type="submit" name="submit" onclick="revealinput()"  style="display: none;"></button>
            <label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
            </label>
        </form>
            <script>
                function revealinput() {
                    var x = document.getElementById("textmessage");
                    if (x.style.visibility === "hidden") {
                        x.style.visibility = "visible";
                    } else {
                        x.style.visibility = "hidden";
                    }
                }
            </script>

    </div>
</body>
    
</html>

标签: stylestextareavisibilitygetelementbyid

解决方案


该脚本不喜欢按钮位于标签内。我将其更改为标签,现在可以使用。


推荐阅读