Изменение цвета фона ввода текстового поля, не работающего при пустом

Мне сложно с этим кодом javascript изменить цвет фона текстового ввода, если вход пуст.

Вот код:

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

Пример: http://jsfiddle.net/2Xgfr/

Я бы ожидал, что текстовое поле станет желтым в начале.

Ответы

Ответ 1

DEMO --> 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();

Примечание. Вы проверяли значение и устанавливали цвет в значение, которое недопустимо, поэтому оно давало вам ошибки. попробуйте, как указано выше.

Ответ 2

Вы не вызывали функцию, и у вас были другие ошибки:

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

Fiddle

Вы установили inputVal на строковое значение ввода, но затем вы попытались установить на него style.backgroundColor, который не будет работать, потому что это строка, а не элемент. Я изменил вашу переменную, чтобы сохранить объект элемента, а не его значение.

Ответ 3

в теге body onLoad попробуйте установить его как

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

и после этого при изменении этого поля ввода проверьте, есть ли какое-то значение, или нарисуйте его желтым, как

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

Ответ 4

Попробуйте следующее:

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

Ответ 5

Не добавляйте стили к значению ввода, поэтому используйте

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

Ответ 6

<! 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

Вы можете настроить его с помощью javascript и css. Добавьте стиль в css и используйте стиль добавления/удаления javascript, используя свойство listlist. Ниже приведена 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');
  }
}