Aquí está el HTML/JS que estoy usando. En este momento, la alternancia funciona, pero se muestra el valor predeterminado del cuadro de texto de entrada. Quiero que el valor predeterminado esté oculto y luego se muestre cuando se haga clic. Intenté agregar display: none como estilos al cuadro de entrada, pero luego dejó de mostrarse cuando se hizo clic. ¿Alguna idea de lo que estoy haciendo mal?
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>¿Es esto lo que quieres? Cuando obtiene el nodo DOM, debe obtener directamente la entrada en sí, no su div principal 
toggle(){ const searchBox = document.getElementById("myInput"); searchBox.placeholder = "you get me" } <input type="text" name="s" placeholder="" class="et_pb_s" id="myInput" >