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
2 Answers
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:
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.
document.getElementById("city").hidden = someBooleanwhere someBoolean will hide if true and show if false