Как сделать кнопку не активной

Question

Как сделать кнопку удаления неактивной, после удаления всех картинок? JavaScript Не могу додуматься, как правильно задать условие, если картинки подгружаются с другого сайта.

const addBtnElement = document.getElementById("addBtn");
const removeBtnElement = document.getElementById("removeBtn");
const sliderElement = document.getElementById("slider");

addBtnElement.addEventListener("click", function() {
  const newImage = document.createElement("img");
  newImage.src = "https://placebeard.it/200x300";
  newImage.alt = "Медведи";
  sliderElement.appendChild(newImage);
});
removeBtnElement.addEventListener("click", function() {
  slider.removeChild(slider.lastChild);
});

<body>
  <div id="slider">
    <img id="img1" src="https://placebeard.it/200x300" />
  </div>
  <button id="addBtn">Добавить картинку</button>
  <button id="removeBtn">Удалить картинку.</button>
  <script src="index.js"></script>
</body>

Answer 1

Ну что значит "не могу додуматься, как правильно задать условие"? Какая разница, откуда подгружаются картинки? Количество дочерних элементов <div id="slider"> после удаления картинки надо проверять, и если оно стало равно нулю, делать кнопку неактивной. А при добавлении картинки делать кнопку активной (а то вдруг она была неактивна?)

const addBtnElement = document.getElementById("addBtn");
const removeBtnElement = document.getElementById("removeBtn");
const sliderElement = document.getElementById("slider");

addBtnElement.addEventListener("click", function() {
  const newImage = document.createElement("img");
  newImage.src = "https://placebeard.it/200x300";
  newImage.alt = "Медведи";
  sliderElement.appendChild(newImage);
  // Делаем кнопку активной
  removeBtnElement.disabled = false;
});
removeBtnElement.addEventListener("click", function() {
  sliderElement.removeChild(sliderElement.lastElementChild);
  // Если дочерних элементов не осталось...
  if (!sliderElement.children.length) {
    // ...то делаем кнопку неактивной
    removeBtnElement.disabled = true;
  }
});

<body>
  <div id="slider">
    <img id="img1" src="https://placebeard.it/200x300" />
  </div>
  <button id="addBtn">Добавить картинку</button>
  <button id="removeBtn">Удалить картинку.</button>
  <script src="index.js"></script>
</body>

Я поменял slider на sliderElement, поскольку хотя из-за наличия у <div> атрибута id="slider" у нас как правило и доступна глобальная переменная с таким же именем, рассчитывать на то, что это будет работать всегда и везде, лучше не надо. Я также заменил свойство lastChild на lastElementChild (соотвутствующей страницы на русском на MDN на момент написания ответа пока нет), поскольку lastChild выбирает любую ноду, в том числе и текстовую, а lastElementChild - только элемент DOM. В данном случае у элемента <div id="slider"> изначально было три потомка - текстовая нода с переводом строки и пробелами, собственно картинка, и ещё одна текстовая нода с переводом строки и пробелами. Можно было бы оставить и lastChild, переписав этот <div> в одну строчку:

<div id="slider"><img id="img1" src="https://placebeard.it/200x300" /></div>

(Кстати, зачем у картинки вообще задан id="img1"?) Но с lastElementChild всё-таки надёжнее.

БЛОГ НА HUSL

Как сделать кнопку не активной

Ответы (1 шт):