If condition breaks before changing the value of the variable

Question

The idea of the system is, while one of the bollean is false, the send button releases to the click. I compare the src of the files, and if one of them is equal to './img/armerVermelha.png', the result variable is false. The code goes like this:

HTML)

<form>
<label id='a' class='a'>
    <img class='images' src='./img/cadeira.png'/>
    <img class='images' src='./img/cadeiraVermelha.png'/>
</label>          

<!--nessa label, a img começa com cadeiraVermelha-->
<label id='b' class='a'>
     <img class='images' src='./img/cadeiraVermelha.png'/>
      <img class='images' src='./img/cadeira.png'/>
</label>

<label id='c' class='a'>
    <img class='images' src='./img/cadeira.png'/>
    <img class='images' src='./img/cadeiraVermelha.png'/>
</label> 
<input id='bnt' type='submit' value='Enviar' disabled>
</form>

JS)

function enableBnt(){
    var label = document.getElementsByClassName('a');
    var bnt=document.getElementById('bnt');//pega o botão

    for(let i=0; i<label.length;i++){
        var cadeiras=label[i].children[0];//pega as primeiras cadeiras
        console.log(cadeiras.getAttribute('src'));

        var result = true;
        if(cadeiras.getAttribute('src')=='./img/cadeiraVermelha.png'){
            var result = false;//se 1 deles for vermelho
            break;
        }
        /*me mostra apenas a primeira cadeira true,
          mas quebra antes de altera pra false na segunda*/
        console.log(result);

        /*Era pra testar se tivesse alterado pra false, mas o valor
          não chega a trocar*/
        if(result==false){  
            bnt.disabled = false;
        }
        else{
            bnt.disabled = true;
        }
    }
}

window.addEventListener("load", function(){
    enableBnt();
});

I tried to take the break to return all the changes and change the value, but it would only work in the last label, because in this situation it is the second label that starts with the 'armerVermelha', when it arrives in the third one the value is back to be 'true'. Could someone help me? I thank you in advance.

Answer 1

From what I understand, you should put the if which will enable or disable the button after the for, why are you using break to stop it. So when the condition inside the for is met, the loop will stop and will not arrive at the second if.

To make it simple, you don’t even need another if, just use the value of the result:

// aqui fica o for
for(...){
  ...
}
// aqui irá desabilitar/habilitar o botão de acordo com o valor de result
bnt.disabled = result;

Answer 2

I didn’t understand what you wanted exactly but I added this line of code that now compares the 2 "children" of the label, since before it compared only the first and not the second.

See if that helps you buddy

function enableBnt(){
    var label = document.getElementsByClassName('a');
    var bnt=document.getElementById('bnt');//pega o botão

    for(let i=0; i<label.length;i++){
        for(let x=0; x<label[i].children.length;x++){
            var cadeiras=label[i].children[x];//pega as primeiras cadeiras
            console.log(cadeiras.getAttribute('src'));

            var result = true;
            if(cadeiras.getAttribute('src')=='./img/cadeiraVermelha.png'){
                var result = false;//se 1 deles for vermelho
            }
        }
        /*me mostra apenas a primeira cadeira true,
          mas quebra antes de altera pra false na segunda*/
        console.log(result);

        /*Era pra testar se tivesse alterado pra false, mas o valor
          não chega a trocar*/
        if(result==false){  
            bnt.disabled = false;
        }
        else{
            bnt.disabled = true;
        }
    }
}

window.addEventListener("load", function(){
    enableBnt();
});