How to use ‘this’ in click handers?

I’m trying to make an expanding box by clicking on <a> but I can’t understand how to use the this
this is how far I’ve gotten so far

function change()
{
 if(this.parentElement.style.height!="auto")
 {
  this.parentElement.style.height="auto";
  this.innerText="show less";
  }
  else
  {
  this.parentElement.style.height="100px";
  this.innerText="show lmore";
  }
}
.container {
  height: 100px;
  position: relative;

  display: grid;
  width: 100%;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1rem;

  overflow: hidden;
  background-color: red;


}


.content {
  width: 100%;
  overflow: hidden;

}
<div class="container">

  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <a class="read_more" href="javascript:void(0);" onclick="change()" style="background-color:yellow; width:50%">show</a>
</div>

While you’re at it can you remind me why clicking anywhere in the green box is causing the link to be pressed?
(I can’t seem to remember)

Answer

You use onclick=change(this), then add a parameter to the function instead of using this in the function.

function change(el) {
  if (el.parentElement.style.height != "auto") {
    el.parentElement.style.height = "auto";
    el.innerText = "show less";
  } else {
    el.parentElement.style.height = "100px";
    el.innerText = "show lmore";
  }
}
.container {
  height: 100px;
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: auto;
  grid-template-rows: 1fr 1rem;
  overflow: hidden;
  background-color: red;
}

.content {
  width: 100%;
  overflow: hidden;
}
<div class="container">

  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
    eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <a class="read_more" href="javascript:void(0);" onclick="change(this)" style="background-color:yellow; width:50%">show</a>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *