javascriptmouseeventdom-eventsmouseclick-eventonmouseclick

Why onclick function isn't working in Javascript snippet below?

function toggleHide(){
let btn = document.getElementById(`btn`);
let para = document.getElementById(`para`);

  if(para.style.display != 'none'){
    para.style.diplay = 'none';
    }
  else{
    para.style.display = 'block';
  }
}
<p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, veniam quia natus animi quos reprehenderit
        voluptates deleniti. Nesciunt fugit adipisci veritatis asperiores tempora voluptatibus est illo nulla tenetur ex</p>
    <button id="btn" onclick="toggleHide()"> Show / Hide </button>

The code's work is to toggle the paragraph by showing and hiding it, even JS console can't identify what's going wrong here!

Solution

  • You spelled the second display wrong.

    function toggleHide(){
let btn = document.getElementById(`btn`);
let para = document.getElementById(`para`);

  if(para.style.display != 'none'){
    para.style.display = 'none';
    }
  else{
    para.style.display = 'block';
  }
}
    <p id="para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, veniam quia natus animi quos reprehenderit
        voluptates deleniti. Nesciunt fugit adipisci veritatis asperiores tempora voluptatibus est illo nulla tenetur ex</p>
    <button id="btn" onclick="toggleHide()"> Show / Hide </button>