リスト項目を上下に動かす際のJavaScriptの問題

Question

最近、javascriptの学習が始まり、単純なアプリケーションを作成しようとしています。それはulで、各liには2つのボタンがあり、liを移動するリスト項目があります。またはダウン。

しかし、私は問題に遭遇しています。リストの最後の項目はここ

var ul = document.querySelector('ul'); 
 
    
 
    ul.addEventListener('click', (e) => { 
 
    \t let clicked = e.target; 
 
    \t let li \t \t = clicked.parentNode; 
 
    \t let next = li.nextElementSibling.nextElementSibling;  
 
     \t let prev = li.previousElementSibling; 
 
     
 
     if (clicked.className === 'down') { 
 
     \t ul.removeChild(li); 
 
      ul.insertBefore(li, next); 
 
     } else if (clicked.className === 'up') { 
 
     \t ul.removeChild(li); 
 
     \t ul.insertBefore(li, prev); 
 
     } 
 
    });

<ul> 
 
     <li>item1 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item2 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item3 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item4 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item5 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
    </ul>

を上方に移動することはできませんjsfiddleである：それはそれらの2例では動作文句を言わない理由https://jsfiddle.net/hu13x8w0/3/

は誰かが、私に説明できますか？私は何を間違えたのですか？

Answer 1

ブラウザのコンソール（ほとんどのブラウザで開発ツールを開くためにF12）をチェックした場合には、このようなエラーが表示されます：

li.nextElementSibling.nextElementSibling; 

：理由は、このライン上だ

Uncaught TypeError: Cannot read property 'nextElementSibling' of null 

を。最後の要素の.nextSiblingはnullです（次の兄弟はありません）。あなたはnullのテストだけではなく、最後に.nextElementSibling余分に連鎖する必要があります。

var ul = document.querySelector('ul'); 
 
    
 
    ul.addEventListener('click', (e) => { 
 
    \t let clicked = e.target; 
 
    \t let li \t \t = clicked.parentNode; 
 
    \t let next = li.nextElementSibling;    // <-- Code changed 
 
     if (next != null) next = next.nextElementSibling; // <-- Code inserted 
 
     \t let prev = li.previousElementSibling; 
 
     
 
     if (clicked.className === 'down') { 
 
     \t ul.insertBefore(li, next); 
 
     } else if (clicked.className === 'up') { 
 
     \t ul.insertBefore(li, prev); 
 
     } 
 
    });

<ul> 
 
     <li>item1 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item2 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item3 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item4 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
     <li>item5 <button class="down">Move down</button><button class="up">Move up</button></li> 
 
    </ul>

あなたは、.removeChild()への呼び出しを必要はありません.insertBefore()意志移動要素理由（コピーしないでください）。