0
184
ViewsJS Toggle but default value as hidden
Here is the HTML/JS I am using. Right now, the toggle works, but the default value of the input text box is showing. I want the default value to be hidden, and then show when clicked. I tried adding display:none as styles to the input box, but then it stopped showing when clicked. Any idea what I am doing wrong?
const searchIcon = document.getElementById("search_icon");
//toggle shows/hides search bar upon clicking search icon
function toggle(){
const searchBox = document.getElementById("text-box");
if (searchBox.style.display === "none") {
searchBox.style.display = "block";
} else {
searchBox.style.display = "none";
}
}<div style="display:flex; align-items: center;">
<span class="et_pb icon_wrap">
<span class="et-pb-icon" id="search_icon" style="font-size: 20px;" onClick="toggle()">U
</span>
</span>
<div id="text-box" style="padding-left: 5px;">
<input type="text" name="s" placeholder="" class="et_pb_s" >
</div>
</div>
·
Juan Pablo Isaza
1 answers
Answer question0
Is this what you want?
When you get the DOM node, you should directly get the input itself, not its parent div
toggle(){
const searchBox = document.getElementById("myInput");
searchBox.placeholder = "you get me"
} <input type="text" name="s" placeholder="" class="et_pb_s" id="myInput" >
·
Juan Pablo Isaza
Report
Answer question