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

0

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 />
    
asked by anonymous 08.08.2018 / 15:55

3 answers

0

You can only use css for this, with 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 want to use only javascript , you can do this:

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>
    
08.08.2018 / 16:36
0

Dude I did an example, but worth a few considerations:

  • If you put style in the button, then it does not make much sense to the disabled, I suggest to leave instead of orange a heavier color and without hover in the button, because it implies that it is enabled and not disabled.

  • I removed the addEventListener () , I think in case you do not need to, because I was listening to the values of the two input . I left the function that validates the fields in the onkeyup event 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>
    
08.08.2018 / 17:40
0

Try this:

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 />
    
08.08.2018 / 18:47