Почему эта кнопка не меняет текст при каждом нажатии, она изменяется только в первый раз

Question

У меня проблема, я делаю функцию, которая изменяет статус чтения книги в массиве объектов. Он должен работать следующим образом: всякий раз, когда я нажимаю кнопку, и ее текстовое содержимое имеет значение «Прочитано», оно должно измениться на «Не прочитано». И если я снова нажму на ту же кнопку, он должен go вернуться к «Читать», но проблема в том, что это не так, он работает только при первом нажатии кнопки.

document.querySelector(".main").addEventListener('click', function(e) {
  if (e.target.classList.contains("book_status")) {
    let bookCard = e.target.parentElement.parentElement;
    // console.log(e.target.textContent)
    if (e.target.textContent = 'Not read') {
      e.target.textContent = 'Read';
    } else if (e.target.textContent = 'Read') {
      e.target.textContent = 'Not read';
    }
  }});

Answer 1

Вы тестируете то, что не настраиваете. Попробуйте это для отладки:

document.querySelector(".main").addEventListener('click', function(e) {
  if (e.target.classList.contains("book_status")) {
    let bookCard = e.target.parentElement.parentElement;
    // console.log(e.target.textContent)
    if (e.target.textContent = 'Not read') {
      e.target.textContent = 'Read';
    } else if (e.target.textContent = 'Read') {
      e.target.textContent = 'Not read';
    } else {
      console.log('Unknown textContent. e.target.textContent = ' + e.target.textContent);
    }
  } else {
    console.log('e.target.classList DOES NOT include book_status');
  }
});

Answer 2

Без HTML трудно точно сказать, что могло бы go ошибаться. Но сразу бросается в глаза одна опечатка:

if (e.target.textContent = 'Not read') 

и

} else if (e.target.textContent = 'Read') {

, вероятно, должны иметь == вместо = ...

Answer 3

= - оператор присваивания, == - для вычисления

document.querySelector(".main").addEventListener('click', function(e) {
  if (e.target.classList.contains("book_status")) {
    let bookCard = e.target.parentElement.parentElement;
    // console.log(e.target.textContent)
    if (e.target.textContent == 'Not read') {
      e.target.textContent = 'Read';
    } else if (e.target.textContent == 'Read') {
      e.target.textContent = 'Not read';
    }
  }});