How to change the color of the form button with javascript?

Question

I have the following code JavaScript, how do I change the background color of the button when it is disabled?

let campoSenha = document.querySelector('input[name="senha_imob"]');
let campoConfirmarSenha = document.querySelector('input[name="rsenha_imob"]');
let botao = document.querySelector('input[name="btn-entrar"]');
    
campoSenha.addEventListener('input', function(){
    verificaCampos();
});
    
campoConfirmarSenha.addEventListener('input', function(){
    verificaCampos();
});
    
function verificaCampos() {
    if(campoSenha.value == campoConfirmarSenha.value && campoSenha.value.length > 8)
    	botao.disabled = false;
    else
    	botao.disabled = true;
}

.frm-botao {
    width: 100%;
    background-color:#EA8419;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:25px;
    font-weight:normal;
    padding: 10px;
    margin-top: 10px;
}
.frm-botao:hover {
    background-color:#C16911;
}

<input type="submit" name="btn-entrar" value="ATUALIZAR" class="frm-botao" disabled />

Answer 1

Can only use css for this, with the pseudo-class :disabled:

button:disabled {
  background-color: cyan
}

<p>
<button>
Sou um botão sem disabled
</button>
</p>
<p>
<button disabled>
  Sou um botão desabilitado
</button>
</p>

Or if you just want to use javascript, can do so:

botao.style.backgroundColor = "cyan";

document.getElementById('b2').onclick = function() {
   var botao = document.getElementById('b1');
   botao.disabled = true;
   botao.style.backgroundColor = "cyan";
}

 <p>
    <button id='b1'>
      Botão
    </button>
    </p>
    <p>
    <button id='b2'>
      Desabilitar botão
    </button>
</p>

Answer 2

Guy made an example, but it’s worth a few considerations:

• If you put style on the button, then it doesn’t make much sense the disabled, I suggest leaving instead of orange a heavier color and without Hover on the button as it indicates that it is enabled and not disabled.

• I removed the addeventlistener(), I don’t think you need to, because you were listening to the values of both input. I left the function that validates the fields in the event onkeyup in the last input, making more sense.

let campoSenha = document.querySelector('input[name="senha_imob"]');
let campoConfirmarSenha = document.querySelector('input[name="rsenha_imob"]');
let botao = document.querySelector('input[name="btn-entrar"]');
    
function verificaCampos() {
    if(campoSenha.value == campoConfirmarSenha.value && campoConfirmarSenha.value.length < 8 ){
      botao.style.backgroundColor = 'green';
      botao.disabled = false;
    }else{
      botao.style.backgroundColor = '#EA8419';
      botao.disabled = true;
    }
}

.frm-botao {
    width: 100%;
    background-color:#EA8419;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:25px;
    font-weight:normal;
    padding: 10px;
    margin-top: 10px;
}
.frm-botao:hover {
    background-color:#C16911;
}

<input type="password" name="senha_imob">
<input type="password" name="rsenha_imob" onkeyup="verificaCampos()">
<input type="submit" name="btn-entrar" value="ATUALIZAR" class="frm-botao" disabled>

Answer 3

Try it this way:

Javascript:

function verificaCampos() {
if(campoSenha.value == campoConfirmarSenha.value && campoSenha.value.length > 8)
    botao.disabled = false;
    botao.classList.remove('frm-botao-disabled');
    botao.classList.add('frm-botao');
else
    botao.disabled = true;
    botao.classList.remove('frm-botao');
    botao.classList.add('frm-botao-disabled');
}

Css:

.frm-botao {
    width: 100%;
    background-color:#EA8419;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:25px;
    font-weight:normal;
    padding: 10px;
    margin-top: 10px;
}
.frm-botao:hover {
    background-color:#C16911;
}
.frm-botao-disabled {
    width: 100%;
    background-color:#A9A9A9;
    border:none;
    cursor:pointer;
    color:#FFFFFF;
    font-size:25px;
    font-weight:normal;
    padding: 10px;
    margin-top: 10px;
}

Html:

<input type="submit" name="btn-entrar" value="ATUALIZAR" class="frm-botao" disabled />