Код при нажатии javascript функция не работает?

Question

Я новичок в javascript, поэтому я не могу понять, в чем проблема с моим кодом.

Я просто хочу добавить класс .open в мой maindiv, щелкнув по нему. Я хочу, чтобы мой div открывался с левой стороны.

function myfunction() {
  $(this).addClass('open');
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>

Answer 1

У вас были проблемы с this. Просто попробуйте получить доступ к вашему div по ID в jQuery. Вы также можете изменить .addClass на toggleClass, если хотите переключить его при следующем нажатии.

function myfunction() {
  $("#maindiv").addClass('open');
}

body {
  margin: 0px;
  padding: 0px;
  text-align: center;
}

#maindiv {
  margin: 0px;
  transform: rotate(270deg);
  position: absolute;
  top: 20%;
  left: -292px;
}

.open {
  left: 5px !important;
  transition-property: left;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
  transition-delay: 0.5s;
}

#form {
  border: 1px solid black;
  width: 300px;
  height: 300px;
  margin: 0px;
  transform: rotate(-270deg);
}

#mainbutton {
  width: 303px;
  padding: 0px;
  cursor: pointer;
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js">
</script>
<div id="maindiv" onclick="myfunction()">

  <div id="mainbox">

    <div id="form">
      <h1>main heading</h1>
      <h6>hi</h6>
    </div>

    <button id="mainbutton"> contact me</button>
  </div>

</div>

Answer 2

Вы передаете это как параметр для функции. Тогда это будет работать.

<div id="maindiv" onclick="myfunction(this)">



function myfunction(elm) { $(elm).addClass('open'); }