How to use a function for multiple Javascript vanilla Ivs?

Question

I need to implement a rule to allow the badge to change color according to "Value" but the rule is only taking the 1 badge the others are not taking as it should use in my Javascript?

<nav class="tiles box-one mx-auto d-table w-50 ">
    <div type="button" class="btn tile col-md-2 badge  position-relative">
        <img src="./img/logo_meli.jpg">
        <input id="ValBdg" type="hidden" value="1" />
        <span  class="bdg badge position-absolute badge-notification btn-danger"> 666</span>
    </div>
    
    <div type="button" class="btn tile col-md-2 badge position-relative">
        <img src="./img/logo_meli.jpg">
        <input id="ValBdg" type="hidden" value="2" />
        <span  class="bdg badge position-absolute  badge-notification btn-danger"> 666</span>
        
    </div>

    <div type="button" class="btn tile col-md-2 badge  position-relative" >
        <img src="./img/logo_meli.jpg">
        <input id="ValBdg" type="hidden" value="0" />
        <span  class="bdg badge position-absolute  badge-notification btn-danger"> 666</span>
        
    </div>
</nav>

var ValBdg = document.getElementById('ValBdg').value;

function Msg(){
    var nodes = document.getElementsByClassName('bdg');

    for (let x=0, s=nodes.length; x<s; x++){
        nodes[x].classList.add("btn-danger");
    }
}

function NoMsg(){
    var nodes = document.getElementsByClassName('bdg');

    for (let x=0, s=nodes.length; x<s; x++){
        nodes[x].classList.remove("btn-danger");
        nodes[x].classList.add("btn-primary");
    }
}

if(ValBdg > 0 ){
    Msg();
}else{
    NoMsg();
}

Answer 1

According to the HTML specification, the attribute id must be unique in a document. getElementById assumes this to be true and therefore only returns an element - the first that you find of the document with a given id.

Yet the attribute id does not necessarily have to be unique (despite being advised and a bad practice).

To solve your problem, I suggest the following changes:

• use class instead of id in the input;
• utilise getElementByClassName to obtain the inputs;
• iterate on inputs and apply the logic you want to.

Example:

function setBadges() {
  const badgeValues = document.getElementsByClassName('ValBdg');
  
  for (let i = 0; i < badgeValues.length; i++) {
    const badge = badgeValues[i].nextElementSibling;
    const badgeClass = badgeValues[i].value > 0 ? 'badge-danger' : 'badge-primary';
    
    badge.classList.remove('badge-danger', 'badge-primary');
    badge.classList.add(badgeClass);
  }
}

document.getElementById('setBadgesButton').addEventListener('click', setBadges);

.badge {
  font-size: 10px;
  padding: 2px;
  border-radius: 10px;
}

.badge.badge-primary {
  background-color: lightblue;
}

.badge.badge-danger {
  color: white;
  background-color: red;
}

<div>
  <input class="ValBdg" type="text" value="1" />
  <span class="badge">AAA</span>
</div>

<div>
  <input class="ValBdg" type="text" value="2" />
  <span class="badge">BBB</span>
</div>

<div>
  <input class="ValBdg" type="text" value="0" />
  <span class="badge">CCC</span>
</div>

<button id="setBadgesButton">Set Badges</button>