У меня есть переменное количество .row внутри #list div, строки могут быть расположены с помощью стрелок вверх и вниз, если в строке нет строки выше или ниже, стрелка перемещения будет деактивирована.

У меня есть NodeList, но когда я пытаюсь изменить кнопку, я получаю сообщение об ошибке 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;
    }
  }
}
0
Artemis 21 Сен 2021 в 23:52

2 ответа

Лучший ответ

Ваш html имеет повторяющиеся идентификаторы #buttonMoveUnitUp и #buttonMoveUnitDown. Я изменил их на классы.

Я также изменил ваш for loop на forEach, так как он чище и проще в использовании.

Затем я превратил повторяющиеся операторы if / else в функцию, чтобы было легче увидеть, что она делает.

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>
0
Invizi 21 Сен 2021 в 21:22

id должны быть уникальными. Вместо этого используйте document.getElementById:

Ваш HTML недействителен, так как у вас есть дубликаты id. Вместо этого вы должны использовать классы.

Ваш HTML должен выглядеть так:

<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>

И ваша функция должна быть:

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;
    }
  }
}

2
Spectric 21 Сен 2021 в 20:59