Use <style> inside if of javascript

Asked

Viewed 575 times

2

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

appears like this

javascript code

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

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

    }

That input I want to turn 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
  • 1

    Just to tell you, you’re on the wrong track. Hehe. I’ll try to help you. Which input you want to leave with red background?

  • I put the input in the question

  • 1

    What you have inside the if is a syntax error in Javascript, and it stops the execution of the code. You cannot mix HTML and JS like this.

2 answers

5


I venture a solution, which consists of the following:

Explanation

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

Having this knowledge, let’s go to the correct mode. That would be using the javascript itself to manipulate the DOM HTML. Where you can manipulate the style of a single element and consequently its properties, 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 (in English).

  • has a way to change the color to red without having to press the button ?? once the two are different already changes

  • Yes, @Lucascarezia, but then it would be with the event onkeyup, I will update my example.

  • @Lucascarezia, I updated my answer.

3

You cannot declare a css stylesheet within a javascript. Replace the code <style></style> for senha.style.backgroundColor = "#f00";, for example.

See the example below for better understanding, in it I used a button only to call the function that simulates an error event, the line that really interests you 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>

Browser other questions tagged php javascript

You are not signed in. Login or sign up in order to post.