Html textbox visible with button click

November 4, 2021

How can i make a html textbox invisible and then it becomes visible when a user clicks on a button?
That button already has a js funtion to get values from an API but can it also make a textbox visible?
Btw i’m using getElementh by id.
The textbox is <input type="textbox" id="city">
Thanks

>Solution :

Assuming you have set display of your textbox to block, you can simply do if using onclick:

<button onclick="showHideTextBox()">Click Me to Show/Hide</button>
<input type="textbox" id="city">
<script>
    function showHideTextBox(){
      var x = document.getElementById("city");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }
</script>

Instead of block you can add whatever display attribute value you want to add and inside showHideTextBox function you can add other logic which is needed for your api calls.

I found great answer about how to show hide elements in javascript: How to show or hide an element: