发表新帖
发表新帖

Changing background color of text box input not working when empty

前端 未结
关注
8 1946
半阙折子戏
半阙折子戏 2020-12-29 07:37

I am having a tough time with this javascript code to change the background color of a text input if the input is empty.

Here is the code:

function c
相关标签:
8条回答
  • [愿得一人]
    2020-12-29 07:45

    Don't add styles to value of input so use like

    function checkFilled() {
    var inputElem = document.getElementById("subEmail");
    if (inputElem.value == "") {
        inputElem.style.backgroundColor = "yellow";
                }
        }
    0 讨论(0)
  • 故里飘歌
    2020-12-29 07:45 
    <! 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>

    0 讨论(0)
  • 花落未央
    2020-12-29 07:46

    You could have the CSS first style the textbox, then have js change it:

    <input type="text" style="background-color: yellow;" id="subEmail" />

    js:

    function changeColor() {
  document.getElementById("subEmail").style.backgroundColor = "Insert color here"
}
    0 讨论(0)
  • 广开言路
    2020-12-29 07:48

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

    Note: You were checking value and setting color to value which is not allowed, that's why it was giving you errors. try like the above.

    0 讨论(0)
  • 灰色年华
    2020-12-29 07:48

    You didn't call the function and you have other errors, should be:

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

    Fiddle

    You were setting inputVal to the string value of the input, but then you tried to set style.backgroundColor on it, which won't work because it's a string, not the element. I changed your variable to store the element object instead of its value.

    0 讨论(0)
  • 天涯浪人
    2020-12-29 07:58

    Try this:

    function checkFilled() {
var inputVal = document.getElementById("subEmail");
if (inputVal == "") {
    inputVal.style.backgroundColor = "yellow";
    }
}
    0 讨论(0)
 看不清?
提交回复
热议问题