Use style within javascript if

Question

Use style within javascript if

Navigation

#1 by (5 votes)
#2 by (3 votes)

2

Hello, I was doing a test in javascript to see if the value of two inputs were different, if they were I would change the background of an input to red, and tried opening the style tags inside the if and instead of appearing so

appearslikethis

Javascript code

function verificarIgual()
    {
        var senha = document.getElementById('senha_cadastro');
        var confirmar = document.getElementById('confirmarsenha_cadastro');

        if(senha.value != confirma.value)
        {
            <style>
            </style>
        }

    }

This input I want to make red

          <tr>
            <td id="design_geral_escrita" height="22" align="left">
            <label for="senha_cadastro"></label>
            <input width="200" type="text" name="senha_cadastro" id="senha_cadastro" /></td>
          </tr>

php javascript

asked by anonymous 09.05.2015 / 02:26

2 answers

3

You can not declare a css style sheet inside a javascript. Replace the code <style></style> with senha.style.backgroundColor = "#f00"; , for example.

See the example below for a better understanding, in it I used a button just to call the function that simulates an error event, the line that interests you the same is the one I mentioned above.

function error() {
  var senha = document.getElementById('senha');
  senha.style.backgroundColor = '#f00';
}

<p>Simulação erro</p>
<input type="password" id="senha" />

<button type="button" onclick="error()">Simular erro</button>

09.05.2015 / 03:00

Limit Input to a Range of Values In PHP does date () get server or user time?

score 5 · Accepted Answer

I venture into a solution, which consists of the following:

Explanation

The tag <style> is used solely for the declaration styles (CSS) for HTML. And it certainly should not be dynamically inserted in the page to change any style as you are tempted (though it is possible).

Having this knowledge, let's go into the correct mode. That would be to use the javascript itself to manipulate DOM HTML . Where you can manipulate style of an element and consequently its properties, being in its case the property backgroundColor , obtaining a result equivalent to that declared in the tag <style> .

The implementation

What you can do then is the following:

if(senha.value != confirmar.value){
    senha.style.backgroundColor = "#FF0000";
    confirmar.style.backgroundColor = "#FF0000";           
}else{
    senha.style.backgroundColor = "#FFFFFF";
    confirmar.style.backgroundColor = "#FFFFFF";
}

Being a complete example like this:

function verificarIgual() {
  if (senha.value != confirmar.value) {
    senha.style.backgroundColor = "#FF0000";
    confirmar.style.backgroundColor = "#FF0000";
  } else {
    senha.style.backgroundColor = "#FFFFFF";
    confirmar.style.backgroundColor = "#FFFFFF";
  }
}

var senha = document.getElementById('senha_cadastro');
var confirmar = document.getElementById('confirmarsenha_cadastro');
senha.onkeyup = verificarIgual;
confirmar.onkeyup = verificarIgual;

<input type="text" id="senha_cadastro" />
<input type="text" id="confirmarsenha_cadastro" />

There is also a version of the online example in jsFiddle.

Sources: Using dynamic styling information . p>