Change input style if filled using a class name

Question

I found fiddle to change input style if filled. But it's using ID. I want to use class name. I used document.getElementsByClassName(), but it's not working. Anyone can help? Thanks.

Here is the code

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

and here is the link to Fiddle

Pranav C Balan · Accepted Answer · 2015-09-03 09:32:23Z

1

getElementsByClassName() returns array of dom elements so you need to use inputVal[0] instaed of inputVal

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

checkFilled();

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

Document.getElementsByClassName() : Returns an array-like object of all child elements which have all of the given class names. When called on the document object, the complete document is searched, including the root node. You may also call getElementsByClassName() on any element; it will return only elements which are descendants of the specified root element with the given class names.

Taken from : here

edited Sep 3, 2015 at 9:32

answered Sep 3, 2015 at 9:24

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2015-09-03 09:25:03Z

1

document.getElementsByClassName("subEmail")

The above returns all the elements with same class name as an array. You probably need to get the first element in the array like

document.getElementsByClassName("subEmail")[0]

UPDATED FIDDLE

answered Sep 3, 2015 at 9:25

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Satpal · Accepted Answer · 2015-09-03 09:27:43Z

1

I would recommend to pass the reference of element for which event is invoked.

HTML

<input type="text" onchange="checkFilled(this);"/>

Script

function checkFilled(elem) {
    elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

function checkFilled(elem) {
  elem.style.backgroundColor = elem.value == "" ? "yellow" : "";
}

window.onload = function() {
  checkFilled(document.getElementsByClassName("subEmail")[0]);
}

<input type="text" class="subEmail" onchange="checkFilled(this);" />

answered Sep 3, 2015 at 9:27

Satpal

134k13 gold badges168 silver badges171 bronze badges

Comments

Jkike · Accepted Answer · 2015-09-03 09:28:53Z

1

here is the fiddle working http://jsfiddle.net/2Xgfr/913/

function checkFilled() {
    var inputVals = document.getElementsByClassName("subEmail");

for(var i=0; i<inputVals.length;i++){
    if (inputVals[i].value == "") {
        inputVals[i].style.backgroundColor = "yellow";
    }
    else{
        inputVals[i].style.backgroundColor = "";
    }
    }
}

checkFilled();

And the html

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

I used a for cycle so you can have multiple field.

answered Sep 3, 2015 at 9:28

Jkike

8056 silver badges12 bronze badges

Collectives™ on Stack Overflow

Change input style if filled using a class name

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related