Search code examples
stylestextareavisibilitygetelementbyid

Escape script to hide/reveal textarea

I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.

I'm guessing that I'm not escaping the script properly. Any thoughts?

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

  • The script didn't like the button being inside a tag. I changed it to a tag and it works now.