Как изменить цвет посещенной ссылки в java-скрипте dom

Question

У меня проблема в Доме.Я хочу изменить цвет посещенной ссылки на основе alreadyRead (логическое значение).Я новичок в этой области, поэтому, если я делаю что-то не так, пожалуйста, прости меня за это.Вот мой фрагмент кода.Заранее спасибо!

var books = [
  {
    title: 'The Design of EveryDay Things',
    author: 'Don Norman',
    alreadyRead: false
  },
  {
    title: 'The Most Human Human',
    author: 'Brian Christian',
    alreadyRead: true
  }
];

var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book =>{
  if(book.alreadyRead === true){
    document.linkcolor="green"
  } else{
    document.linkcolor ="red"
  }
  var liTag = document.createElement('li');
  var navList =document.createTextNode(`${book.title} by ${ book.author}`)
  var aTag = document.createElement('a')
  aTag.setAttribute('href','#');
  aTag.appendChild(navList)
  liTag.appendChild(aTag);
  ulTag.appendChild(liTag);
})
appHandle.appendChild(ulTag)

Answer 1

В простейшем случае вы можете достичь того, чего хотите, с помощью следующей строки:

aTag.classList.toggle('alreadyRead', book.alreadyRead);

В этой строке используется API Element.classList для переключения имени класса alreadyRead на соответствующем aTag узел элемента, основанный на переключателе, который следует за именем класса.Если коммутатор возвращает true, класс добавляется (если он еще не существует) или если коммутатор возвращает false, имя класса удаляется (если присутствует).

var books = [{
    title: 'The Design of EveryDay Things',
    author: 'Don Norman',
    alreadyRead: false
  },

  {
    title: 'The Most Human Human',
    author: 'Brian Christian',
    alreadyRead: true

  }
];

var appHandle = document.getElementById('app');
var ulTag = document.createElement('ul')
books.forEach(book => {
  var liTag = document.createElement('li');
  var navList = document.createTextNode(`${book.title} by ${ book.author}`);
  var aTag = document.createElement('a')
  aTag.setAttribute('href', '#');
  aTag.appendChild(navList)
  liTag.appendChild(aTag);
  ulTag.appendChild(liTag);
  
  aTag.classList.toggle('alreadyRead', book.alreadyRead);
})
appHandle.appendChild(ulTag)

.alreadyRead {
  color: limegreen;
}

<div id="app"></div>

JS Fiddle demo .

Ссылки:

• Element.classList.