Html textbox visible with button click

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

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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:

Method 2

Yes, That button can also make the textbox visible. Add textbox’s visible code to the button’s event listener’s function along with your existing fetch API function.

const button = document.getElementById("button");
button.addEventListener("click", function(){
  // write textbox's show/hide function
   // call your existing function
})

To show/hide textbox you can toggle a class.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0