将脚本转义到 hide/reveal textarea

Question

我需要单击按钮以显示文本区域，以便用户可以选择上传图像或文本消息。当我运行页面时，我可以看到 hidden/visible 元素开始运行，但它并没有保持在新状态。它会立即恢复到最初设置的状态。

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

<!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>

Answer 1

脚本不喜欢标签内的按钮。我将其更改为标签，现在可以使用了。

将脚本转义到 hide/reveal textarea

Escape script to hide/reveal textarea

styles

visibility

textarea

getelementbyid