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