JavaScript события в порядке

Question

У меня есть кнопка, и эта кнопка должна обернуть текст и распаковать его, как сделать так, чтобы кнопка распаковывала текст для первого клика, а затем для следующего клика?Обтекание выполняется по свойству white-space.

// split the state into two chunks
function fullView(e) {
        // check if the element is the targeted or not
    if (e.target.parentElement.className == 'note') {
          // first state with the un-wrap text
         if(e.target.style.whiteSpace == 'normal'){
         // convert it to wraped
            document.querySelector(".note-content").style.whiteSpace = "nowrap";
        }else {
        // convert it to un-warped text
            document.querySelector(".note-content").style.whiteSpace = "normal";
        }
    }
}

<li class="note">
    <p class="note-content"> 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !! 
        Hello, World Note !!
    </p> 
</li>

Answer 1

Из содержимого fullView я предполагаю, что вы установили его как обработчик click на .note-content.Если это так, самый простой способ - определить класс CSS:

.nowrap {
    white-space: nowrap;
}

... и в fullView переключить его:

function fullView(e) {
  e.target.classList.toggle("nowrap");
}

Live Пример:

// split the state into two chunks
function fullView(e) {
  e.target.classList.toggle("nowrap");
}
document.querySelector(".note-content").addEventListener("click", fullView);

.nowrap {
  white-space: nowrap;
}

<li class="note">
                 <p class="note-content"> 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !! 
                    Hello, World Note !!
                    </p> 
</li>