为什么这个三元运算符不起作用？ （更多下文）

Question

I have a function, which works fine with if/else, but not with ternary. Anyone knows the reason? Also, if anyone could tell me a way the make it look nicer I'd really appreciate it.

function print(){
    for (const book of myLibrary){
        let cover = document.createElement('div')
        cover.textContent =`title: ${book.title} 
                            author: ${book.author}
                            pages: ${book.pages}` 
        
        // this line: (book.finished) ? cover.classList.add('bookStyle') : cover.classList.add('bookStyle2');
        
        if (book.finished){
            cover.classList.add('bookStyle')
        }
        else{
            cover.classList.add('bookStyle2')
        }

        books.appendChild(cover)
    }
}

Answer 1

Ternaries are great when they are used to return values, not perform or invoke actions.

Here is how I would improve your ternary.

// Old
this line: (book.finished) ? cover.classList.add('bookStyle') : cover.classList.add('bookStyle2');
// Prefered
cover.classList.add(book.finished ? 'bookStyle' : 'bookStyle2');