почему моя кнопка не синхронизируется с событием onclick? - PullRequest
Новая
       11

почему моя кнопка не синхронизируется с событием onclick?

0 голосов
/ 08 ноября 2019

Я изучал javascript и наткнулся на видео об использовании событий onclick, (https://www.youtube.com/watch?v=XQEfWd1lh4Q&list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET&index=41&t=23s).Basically, парень сделал карту, которая может расширяться, чтобы показать часть контента, которую он отрезал. Я смог проследитьи только немного понимаю, просматривая видео. Поэтому, чтобы углубить свое понимание, я решил перекодировать то, что было показано в видео, не обращаясь к нему.

Я получил то, что хотел, но есть одна маленькая вещь, которая быларазочаровывает меня. Когда я запускаю свой код, я получаю сжатую карточку с кнопкой «Show More» (что хорошо), но когда я нажимаю кнопку, карточка расширяется, но кнопка все еще говорит «Show More»(это то, где это начинает ухудшаться), и только когда я нажимаю кнопку в третий раз, чтобы сжать карту, кнопка читает «Показать меньше». 

var contentDiv = document.querySelector('.content');
var button = document.querySelector('.button');

button.onclick = function(){
  if(contentDiv.className == 'content'){
    contentDiv.classList.add('appear');
    button.innerHTML = 'Show More';
  } else if(contentDiv.className == 'content appear'){
    contentDiv.classList.remove('appear');
    button.innerHTML = 'Show Less';
  }
};
*{
  margin: 0;
  padding: 0;
}

body{
  background: #a1a1a1;
}

.group{
  margin-top: 10%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

.content{
  background: #dedede;
  border-radius: 10px;
  width: 250px;
  height: 300px;
  overflow: hidden;
  color: #2e2e2e;
  background: #e8e8e8;

  transition: all .5s;
}

.appear{
  height: 530px;
  color: #e8e8e8;
  background: #2e2e2e;
}

.content p{
  margin: 10px;
}

.button{
  margin: 10px;
  background: #f0ca62;
  padding: 5px;
  border-radius: 10px;
  cursor: pointer;
}
<!DOCTYPE html>
<html>
  <head>
    <title>Events</title>
    <link rel="stylesheet" href="./css/style.css">
  </head>
  <body>
    <div class="group">
      <div class="content">
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
          width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
        <p>width inflation scrape lamp continuation insistence proof pioneer trait
          vegetation dorm bring ball charter joy brick cabinet nest use economist
        </p>
      </div>

      <a class="button">Show More</a>
    </div>


    <script type="text/javascript" src="./js/script.js"></script>
  </body>
</html>

ссылка на код в коде ручки

1 Ответ

0 голосов
/ 08 ноября 2019

Кажется, что кнопки «показать больше» и «показать меньше» поменялись местами, попробуйте это: 

button.onclick = function(){
  if(contentDiv.className == 'content'){
    contentDiv.classList.add('appear');
    button.innerHTML = 'Show Less';
  } else if(contentDiv.className == 'content appear'){
    contentDiv.classList.remove('appear');
    button.innerHTML = 'Show More';
  }
};
...