Кнопка срабатывает со второго раза onclick="tabs

Кнопки работают только тогда, когда я два раза нажму первую кнопку. Если этого не сделаю, все остальные кнопки заблокированы

function tabs(){
  const btnop1=document.getElementById("cl1");
  const btnop2=document.getElementById("cl2");
  const btnop3=document.getElementById("cl3");
  const btnop4=document.getElementById("cl4");
  const text1=document.getElementById("firstoption");
  const text2=document.getElementById("secondoption");
  const text3=document.getElementById("thirdoption");
  const text4=document.getElementById("forthoption");
  btnop1.onclick=function (){
      text3.style.display="none";
      text2.style.display="none";
      text4.style.display="none";
      text1.style.display="block";
    btnop1.style.borderBottom="8px solid";
    btnop2.style.borderBottom="none";
    btnop3.style.borderBottom="none";
  }
    btnop4.onclick=function (){
        text3.style.display="none";
        text2.style.display="none";
        text1.style.display="none";
        text4.style.display="block";
        btnop1.style.borderBottom="8px solid";
        btnop2.style.borderBottom="none";
        btnop3.style.borderBottom="none";
    }
    btnop2.onclick=function (){


        text1.style.display="none";
        text3.style.display="none";
        text4.style.display="none";
        text2.style.display="block";
        btnop1.style.borderBottom="none";
        btnop2.style.borderBottom="8px solid";
        btnop3.style.borderBottom="none";
    }

    btnop3.onclick=function (){

        text1.style.display="none";
        text2.style.display="none";
        text3.style.display="block";
        text4.style.display="none";

        btnop1.style.borderBottom="none";
        btnop2.style.borderBottom="none";
        btnop3.style.borderBottom="8px solid";
    }


}