JS Toggle but default value as hidden

Question

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>

_"I tried adding display:none as styles to the input box"_ - it works perfectly fine, if you add this as inline style to the #text-box element. If you try to add it via your stylesheet, then `searchBox.style.display` will not be able to read the current value though, unless it has been set via JavaScript for the first time. — CBroe, May 05 '22 at 07:39
More explanation on how reading element styles in JS works here, https://stackoverflow.com/a/2664055/1427878 — CBroe, May 05 '22 at 07:40
By *"default value"* you mean **placeholder**? If so, why don't you call it as such? Since... A placeholder has nothing to do with default values. — Roko C. Buljan, May 05 '22 at 07:54

ConstFiv · Answer 1 · 2022-05-05T07:47:57.433

0

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

edited May 05 '22 at 07:47

answered May 05 '22 at 07:42

ConstFiv

67
6

JS Toggle but default value as hidden

1 Answers1