Как сделать кнопки активными при помощи JavaScript?

Question

У меня по умолчанию кнопки должны быть неактивными. Но когда нажимаешь на кнопку "Редактировать" вместе с этой кнопкой должны стать активными и "Сохранить, и "Отмена". У меня не получается отменить disabled в JS.

<section class="editor">
        <div class="textblock" contenteditable="false">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
        Donec fermentum lorem ex, sed malesuada mauris molestie 
        ut. Vestibulum dapibus sit amet est sit amet pellentesque. 
        Maecenas cursus turpis sed dolor viverra interdum. Praesent 
        pretium nisl eget odio elementum, ut vulputate magna lobortis.
        </div>
        <div class="buttons">
            <button class="btn editBtn" disabled>Редактировать</button>
            <button class="btn saveBtn" disabled>Сохранить</button>
            <button class="btn cancelBtn" disabled>Отмена</button>
        </div>
</section>
<script src="js/main.js"></script>

let textblock = document.querySelector(".textblock");
let editBtn = document.querySelector(".editBtn");
let saveBtn = document.querySelector(".saveBtn");
let cancelBtn = document.querySelector(".cancelBtn");
let editableForm = document.querySelector("[contenteditable=false]");
let activeSaveBtn = document.querySelector("[class*=saveBtn]");
let activeCancelBtn = document.querySelector("[class*=cancelBtn]");
let buttons = document.querySelectorAll(".btn");

buttons.addEventListener("click", function(e) {
    if(e.target.tagName === "BUTTON") {
        e.target.removeAttribute("disabled", "true");
        e.target.focus();
    }
    else {
        e.target.setAttribute("disabled", "false");
    }
});

Answer 1

Хотя из вопроса не до конца ясна логика, но предположу, что требовалось это:

let textblock = document.querySelector(".textblock");
let buttons = document.querySelector(".buttons");
let editBtn = document.querySelector(".editBtn");
let saveBtn = document.querySelector(".saveBtn");
let cancelBtn = document.querySelector(".cancelBtn");
let oldValue = '';

buttons.addEventListener("click", function(ev) {
  // Если нажали внутри блока кнопок, но не по кнопке, тогда не реагируем
  if (ev.target.tagName != "BUTTON") { return false; }
  // Если нажата кнопка [Редактировать]
  if (ev.target.classList.contains('editBtn')) {
    saveBtn.removeAttribute("disabled");
    cancelBtn.removeAttribute("disabled");
    editBtn.setAttribute("disabled", "true");
    textblock.setAttribute("contenteditable", "true");
    textblock.focus();
    oldValue = textblock.innerHTML;
  } else {
    if (ev.target.classList.contains('saveBtn')) {
      // Производим какие-то действия для записи изменённого содержимого
      // ...
    } else if (ev.target.classList.contains('cancelBtn')) {
      // Отменяем все изменения, возвращая старое значение
      textblock.innerHTML = oldValue;
    }
    textblock.removeAttribute("contenteditable");
    editBtn.removeAttribute("disabled");
    saveBtn.setAttribute("disabled", "true");
    cancelBtn.setAttribute("disabled", "true");
  }
});

<section class="editor">
  <div class="textblock">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum lorem ex, sed malesuada mauris molestie ut. Vestibulum dapibus sit amet est sit amet pellentesque. Maecenas cursus turpis sed dolor viverra interdum. Praesent pretium nisl eget odio
    elementum, ut vulputate magna lobortis.
  </div>
  <div class="buttons">
    <button class="btn editBtn">Редактировать</button>
    <button class="btn saveBtn" disabled>Сохранить</button>
    <button class="btn cancelBtn" disabled>Отмена</button>
  </div>
</section>

БЛОГ НА HUSL

Как сделать кнопки активными при помощи JavaScript?

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