Javascript onclick 事件需要两次点击

Question

我正在尝试弄清楚如何使这一单击事件只需单击一次，因为目前需要单击两次。之前我内联了点击事件，但读完这里后，我将其更改为下面的代码，但仍然不起作用。

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>

Answer 1

这是 JS 中切换元素的逻辑。
单击显示输入框，然后再次单击相同的输入框以隐藏下面的下一个输入框，并对其应用一些样式。

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