Question 221312 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript onclick event takes two clicks

I am trying to figure out how to make this one click event to take only one click, as it currently takes two. Before I had the on click event inline, but after reading here, I changed it to the code below but still did not work.

const input = document.getElementById("divinput");
input.addEventListener("click", myFunction2);

function myFunction2() {
  var x = document.getElementById("recentsearch");
  var element = document.getElementById("searchbox");
  if (x.style.display === "none") {
    x.style.display = "block";
    element.style.borderRadius = "24px 24px 0px 0px";
  } else {
    x.style.display = "none";
    element.style.borderRadius = "24px";
  }
}
<div id="divinput" class="divinput">
  <input type="text" class="textarea">
</div>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks so much for your answer but I cannot make it to work. Nothing shows. I will keep trying, thanks!!!


  2. 0

    Here is the logic with toggling elements in JS.
    Input box click to show and again click same input box to hide the next below input box and it applies some styles to it.

    //function to return HTML element by its Id
let elemById = (id) => document.getElementById(id);

const input = elemById("divinput");
input.addEventListener("click", myFunction2);

function myFunction2() {
  let rs = elemById("recentsearch");
  let rsClassList = rs.classList;
  
 if(rsClassList.contains("d-none")){
  /*toggle means if class name is present then remove and if not available the make the class available on that element. */
  rsClassList.toggle("d-none");
  rs.style.borderRadius = "24px 24px 0px 0px"
 }else {
  rsClassList.toggle("d-none");
  rs.style.borderRadius = "24px";
 }
   
}
    .d-none {
  display : none;
}
    <div >
  <input type="text" id="divinput" class="divinput">
</div>

<br/>

<div>
  <input type="text" id="recentsearch" class="d-none recentsearch">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search