J'ai un nombre variable de .row à l'intérieur d'un div #list, les lignes peuvent être organisées avec des flèches haut et bas, si la ligne n'a pas de ligne au-dessus ou en dessous, la flèche de déplacement se désactivera.

J'ai la NodeList mais quand j'essaye de changer le bouton j'obtiens l'erreur 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 sept. 2021 à 23:52

2 réponses

Meilleure réponse

Votre code HTML a répété les identifiants #buttonMoveUnitUp et #buttonMoveUnitDown. Je les ai changés pour être des classes.

J'ai également changé votre for loop, en forEach, car il est plus propre et plus facile à utiliser.

Ensuite, j'ai changé les instructions if / else répétées en une fonction, il est donc plus facile de voir ce qu'elle fait.

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 sept. 2021 à 21:22

Les id doivent être uniques. Utilisez document.getElementById à la place :

Votre code HTML n'est pas valide, car vous avez des id en double. Vous devriez plutôt utiliser des classes.

Votre code HTML devrait ressembler à:

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

Et votre fonction devrait être:

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 sept. 2021 à 20:59