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

Je vais avoir un moment difficile avec ce code javascript pour changer la couleur d'arrière-plan d'un texte d'entrée si celle-ci est vide.

Voici le code:

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

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

J'attendrais la zone de texte à venir jaune au début.

source d'informationauteur samyb8

  1. 25

    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 avez le contrôle de la valeur et de la définition de la couleur à une valeur qui n'est pas autorisé, c'est pourquoi il a été de vous donner des erreurs. essayez comme ci-dessus.

  2. 4

    Vous n'avez pas appeler la fonction et que vous avez d'autres erreurs, doit être:

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

    Violon

    Configuration de inputVal de la chaîne de valeur de l'entrée, mais alors vous avez essayé de définir style.backgroundColor sur elle, ce qui ne fonctionnera pas parce que c'est une chaîne, pas l'élément. J'ai changé votre variable pour stocker l'élément de l'objet au lieu de sa valeur.

  3. 4

    sur la balise body onLoad essayez comme

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

    et après que les modifications de ce champ d'entrée de vérifier si une valeur existe, ou de la peinture jaune, comme

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

    Essayez ceci:

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

    Ne pas ajouter des styles à la valeur de l'entrée afin de l'utiliser comme

    function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }
  6. 2
    <! 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>

  7. 0

    Vous pouvez définir le style à l'aide de javascript et de css. Ajouter la feuille de style en css et en javascript ajouter/supprimer un style à l'aide classlist de la propriété. Voici une JSFiddle.

      <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');
  }
}