web-dev-qa-db-fra.com

Modification de la couleur d'arrière-plan de l'entrée de zone de texte ne fonctionnant pas lorsqu'elle est vide

Je rencontre des difficultés avec ce code javascript pour changer la couleur de fond d'une entrée de texte si l'entrée est vide.

Voici le code:

function checkFilled() {
    var inputVal = document.getElementById("subEmail").value;
    if (inputVal == "") {
        inputVal.style.backgroundColor = "yellow";
                }
        }

Exemple: http://jsfiddle.net/2Xgfr/

Je m'attendrais à ce que la zone de texte apparaisse en jaune au début.

javascripttextinputcolorsbackground
11
samyb8

DÉMO-->http://jsfiddle.net/2Xgfr/829/

HTML

<input type="text" id="subEmail" onchange="checkFilled();">

JavaScript

 function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
    else{
        inputVal.style.backgroundColor = "";
    }
}

checkFilled();

Remarque: Vous vérifiiez la valeur et définissiez la couleur sur une valeur non autorisée. C'est pourquoi il vous renvoyait des erreurs. essayez comme ci-dessus.

26
Dhaval Marthak

essayez onLoad sur la balise body en le configurant comme

document.getElementById("subEmail").style.backgroundColor = "yellow";

et après que lors du changement de ce champ d'entrée, vérifiez s'il y a une valeur, ou peignez-le en jaune comme

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal.value == "") {
    inputVal.style.backgroundColor = "yellow";
            }
    }
4
VD'

Vous n'avez pas appelé la fonction et vous avez d'autres erreurs, devrait être:

function checkFilled() {
    var inputVal = document.getElementById("subEmail");
    if (inputVal.value == "") {
        inputVal.style.backgroundColor = "yellow";
    }
}
checkFilled();

Fiddle

Vous définissiez inputVal à la valeur de chaîne de l'entrée, mais vous avez ensuite tenté de définir style.backgroundColor, ce qui ne fonctionnera pas car il s'agit d'une chaîne, pas de l'élément. J'ai changé votre variable pour stocker l'objet élément au lieu de sa valeur.

4
MrCode

Essaye ça:

function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}
3
Ankit Zalani
<! DOCTYPE html>
<html>
<head></head>
<body>

    <input type="text" id="subEmail">


    <script type="text/javascript">

        window.onload = function(){

        var subEmail = document.getElementById("subEmail");

        subEmail.onchange = function(){

            if(subEmail.value == "")
            {
                subEmail.style.backgroundColor = "red";
            }
            else
            {
               subEmail.style.backgroundColor = "yellow"; 
            }
        };

    };



    </script>

</body>

2
gaspyr

N'ajoutez pas de styles à la valeur d'entrée, utilisez donc

function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }
2
bugwheels94

Vous pouvez le styler en utilisant javascript et css. Ajoutez le style à css et utilisez javascript pour ajouter/supprimer du style en utilisant la propriété classlist. Voici un JSFiddle for it.

  <div class="div-image-text">
    <input class="input-image-url" type="text" placeholder="Add text" name="input-image">
    <input type="button" onclick="addRemoteImage(event);" value="Submit">
  </div>
  <div class="no-image-url-error" name="input-image-error">Textbox empty</div>

addRemoteImage = function(event) {
  var textbox = document.querySelector("input[name='input-image']"),
    imageUrl = textbox.value,
    errorDiv = document.querySelector("div[name='input-image-error']");
  if (imageUrl == "") {
    errorDiv.style.display = "block";
    textbox.classList.add('text-error');
    setTimeout(function() {
      errorDiv.style.removeProperty('display');
      textbox.classList.remove('text-error');
    }, 3000);
  } else {
    textbox.classList.remove('text-error');
  }
}
0
Kurenai Kunai