Tengo un número variable de .row dentro de un div #list , las filas se pueden organizar con flechas hacia arriba y hacia abajo, si la fila no tiene una fila arriba o abajo, la flecha de movimiento se desactivará.
Obtuve NodeList, pero cuando intento cambiar el botón, aparece el error unitsRows[i].getElementById is not a function
HTML
<div id="List"> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button id="buttonMoveUnitDown" type="button" class="btn-custom mx-0"> <i class="fas fa-arrow-down"></i> </button> <button id="buttonMoveUnitUp" type="button" class="btn-custom mx-0"> <i class="fas fa-arrow-up"></i> </button> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button id="buttonMoveUnitDown" type="button" class="btn-custom mx-0"> <i class="fas fa-arrow-down"></i> </button> <button id="buttonMoveUnitUp" type="button" class="btn-custom mx-0"> <i class="fas fa-arrow-up"></i> </button> </div> </div> </div>JS
function checkMoveButtons(){ var unitsRows = document.querySelectorAll("#list .row"); console.log(unitsRows); for (var i = 0; i < unitsRows.length; i++) { listUnitAbove = unitsRows[i].previousElementSibling; listUnitBelow = unitsRows[i].nextElementSibling; if (listUnitAbove === 'null'){ unitsRows[i].getElementById('buttonMoveUnitUp').classList.add('btn-deactivate'); unitsRows[i].getElementById('buttonMoveUnitUp').disabled = true; } else { unitsRows[i].getElementById('buttonMoveUnitUp').classList.remove('btn-deactivate'); unitsRows[i].getElementById('buttonMoveUnitUp').disabled = false; } if (listUnitBelow === 'null'){ unitsRows[i].getElementById('buttonMoveUnitDown').classList.add('btn-deactivate'); unitsRows[i].getElementById('buttonMoveUnitDown').disabled = true; } else { unitsRows[i].getElementById('buttonMoveUnitUp').classList.remove('btn-deactivate'); unitsRows[i].getElementById('buttonMoveUnitUp').disabled = false; } } }id deben ser únicos. Use document.getElementById en su lugar:
Su HTML no es válido, ya que tiene id duplicadas. Deberías estar usando clases en su lugar.
Su HTML debería verse así:
<div id="List"> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button type="button" class="btn-custom mx-0 buttonMoveUnitDown"> <i class="fas fa-arrow-down"></i> </button> <button type="button" class="btn-custom mx-0 buttonMoveUnitUp"> <i class="fas fa-arrow-up"></i> </button> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button type="button" class="btn-custom mx-0 buttonMoveUnitDown"> <i class="fas fa-arrow-down"></i> </button> <button type="button" class="btn-custom mx-0 buttonMoveUnitUp"> <i class="fas fa-arrow-up"></i> </button> </div>Y tu función debería ser:
function checkMoveButtons(){ var unitsRows = document.querySelectorAll("#list .row"); console.log(unitsRows); for (var i = 0; i < unitsRows.length; i++) { listUnitAbove = unitsRows[i].previousElementSibling; listUnitBelow = unitsRows[i].nextElementSibling; if (listUnitAbove === 'null'){ unitsRows[i].querySelector('.buttonMoveUnitUp').classList.add('btn-deactivate'); unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = true; } else { unitsRows[i].querySelector('.buttonMoveUnitUp').classList.remove('btn-deactivate'); unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = false; } if (listUnitBelow === 'null'){ unitsRows[i].querySelector('.buttonMoveUnitDown').classList.add('btn-deactivate'); unitsRows[i].querySelector('.buttonMoveUnitDown').disabled = true; } else { unitsRows[i].querySelector('.buttonMoveUnitUp').classList.remove('btn-deactivate'); unitsRows[i].querySelector('.buttonMoveUnitUp').disabled = false; } } }Su html tiene identificadores repetidos de #buttonMoveUnitUp y #buttonMoveUnitDown . Los cambié para que fueran clases.
También cambié tu for loop , en un forEach , ya que es más limpio y fácil de usar.
Luego cambié las declaraciones if / else repetidas en una función, por lo que es más fácil ver lo que está haciendo.
function checkMoveButtons() { const unitRows = document.querySelectorAll("#list .row"); unitRows.forEach((row) => { const up = row.previousElementSibling; const down = row.nextElementSibling; const btnMoveUp = up.querySelector(".buttonMoveUnitUp"); const btnMoveDown = up.querySelector(".buttonMoveUnitDown"); toggleBtn(up, btnMoveUp); toggleBtn(down, btnMoveDown) }); } function toggleBtn(neighbour, btn) { if (!neighbour) { btn.classList.add("btn-deactivate"); btn.disabled = true; } else { btn.classList.remove("btn-deactivate"); btn.disabled = false; } } checkMoveButtons() .btn-deactivate { color: grey; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="List"> <div id="listUnit0" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button type="button" class="buttonMoveUnitDown btn-custom mx-0"> <i class="fas fa-arrow-down"></i> </button> <button type="button" class="buttonMoveUnitUp btn-custom mx-0"> <i class="fas fa-arrow-up"></i> </button> </div> </div> <div id="listUnit1" class="row"> <div class="text-center" style="width:50px;"> <p>Name</p> </div> <button type="button" class="buttonMoveUnitDown btn-custom mx-0"> <i class="fas fa-arrow-down"></i> </button> <button type="button" class="buttonMoveUnitUp btn-custom mx-0"> <i class="fas fa-arrow-up"></i> </button> </div>