CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3466038
user3466038

Reputation: 3

Add class in if statement

I'm programming an input site and want to highlight empty fields. I want to check if they're empty with an if statement and then add the class that Highlights them.

My code:

JS:

var hi = function () 
{
   if(document.getElementById('input1').value==="")
   {
      $('#input1').addClass('hi'); 
   };
});

I made it into a function so I can call it in the html file.

HTML:

<input type="text" name="firstname" class="ip" id="input1" placeholder="firstname">

to call the js:

<input type="button" onclick="dcc (); pwc (); hi();" value="Submit" id="button">

The different files(js and html are linked and working).

CSS:

.hi {
  border-color: red;
  border-width: 0.01em;
  margin-right: 15em;
  margin-top: 1.05em;
  float: right;
}

My Problem is: Upon clicking the button nothing happens the other two functions were displayed (alerts telling the user that the chosen pw is too short) but when i linked the hi function they stopped working... Any help would be greatly appreciated! If I described something too vague please ask and I will try to clarify!

Upvotes: 0

Views: 7348

Answers (4)

Soundar
Soundar

Reputation: 2589

You can also try like,

function hi() 
{
   if(document.getElementById('input1').value==="")
   {
      $('#input1').addClass('hi'); 
   }
}

Upvotes: -1

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

Per the OP's request --

This is where you could put console.log statements to track what is happening.

var hi = function () 
{
   console.log("'Hi' - Entering function");
   if(document.getElementById('input1').value==="")
   {
      console.log("'Hi' - Condition true - doing addClass");
      $('#input1').addClass('hi'); 
   };
   console.log("'Hi' - Leaving function");
}

Now, that said, I in reality I do things more like:

var hi = function () 
{
   console.log("'Hi1");
   if(document.getElementById('input1').value==="")
   {
      console.log("'Hi2");
      $('#input1').addClass('hi'); 
   };
    console.log("'Hi3");
}

Upvotes: 0

SomeKittens
SomeKittens

Reputation: 39522

You have a syntax error in hi:

});

^ remove the last paren.

In the future, open up your browser's console and check for errors like this - it makes debugging much easier.

JSFiddle

Alternatively, you could use an event handler for this:

$('#button').click(function () {
    console.log(document.getElementById('input1').value);
    if (document.getElementById('input1').value === "") {
        $('#input1').addClass('hi');
    };
});

Upvotes: 2

Scimonster
Scimonster

Reputation: 33399

It looks to me that you have a syntax error in your JS.

var hi = function () { // cleaner to have the bracket here
   if(document.getElementById('input1').value==="") {
      $('#input1').addClass('hi'); 
   } // no semicolon
}; // no parenthesis

Also, instead of using document.getElementById('input1').value, use jQuery since you have it! $('#input1').val().

Upvotes: 1

Related Questions