Как мне исчезнуть и исправить кнопку сброса здесь? - PullRequest
Новая
       35

Как мне исчезнуть и исправить кнопку сброса здесь?

0 голосов
/ 13 мая 2019 

document.getElementById("shrinkBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "25px";

});

document.getElementById("growBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "250px";

});

document.getElementById("fadeOutBtn").addEventListener("click", function() {

  document.getElementById("box").style.opacity = "slow";

});
document.getElementById("resetBtn").addEventListener("click", function() {

  document.getElementById("box").style.height = "150px";

});
<p>Press the buttons to move the box!</p>

<div id="box" style="height:150px; width:150px; background-color:teal; margin:25px"></div>

<button id="shrinkBtn">Shrink</button>
<button id="growBtn">Grow</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="reset">Reset</button>

Я добавил две кнопки, но она сломала кнопку сброса .. Что мне действительно нужно, это: 

<button id="growkBtn">Grow</button>
<button id="blueBtn">Blue</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="reset">Reset</button>

1 Ответ

0 голосов
/ 13 мая 2019

Вы можете использовать css для создания эффекта затухания, изменив класс, и кнопку сброса, чтобы изменить сброс класса и высоты.

Кроме того, вы используете неправильный id вresetBtn eventListiner, id равно reset, когда вы нацеливаетесь resetBtn. 

document.getElementById("shrinkBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "25px";
});

document.getElementById("growBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "250px";
});

document.getElementById("fadeOutBtn").addEventListener("click", function() {
  document.getElementById("box").className = "hidden";
});
document.getElementById("resetBtn").addEventListener("click", function() {
  document.getElementById("box").style.height = "150px";
    document.getElementById("box").className = "visible";
});
.visible {
  visibility: visible;
  opacity: 1;
}

.hidden {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 2s, opacity 2s linear;
}
<p>Press the buttons to move the box!</p>

<div id="box" class="visible" style="height:150px; width:150px; background-color:teal; margin:25px"></div>

<button id="shrinkBtn">Shrink</button>
<button id="growBtn">Grow</button>
<button id="fadeOutBtn">Fade Out</button>
<button id="resetBtn">Reset</button>
...