CODEWITHSUNDEEP
javascriptjquery
emailcooke
emailcooke

Reputation: 281

Toggle icon based on input value

I have written a function to check an inputs value to determine the Font Awesome icon to display:

function xOrCheck(condition, childNumber) {
    if (condition) {
       $("ul.reqs li:nth-child(childNumber) i.fa").removeClass("fa-check-circle");
       $("ul.reqs li:nth-child(childNumber) i.fa").addClass("fa-times-circle");
    } else {
       $("ul.reqs li:nth-child(childNumber) i.fa").removeClass("fa-times-circle");
       $("ul.reqs li:nth-child(childNumber) i.fa").addClass("fa-check-circle");
    }
}

$('input#demo').on('focus keyup',function(){
 var value = $(this).val();
 var firstChar = value.substring(0,1);
 xOrCheck(firstChar > 5 , 1);
}

Here is the HTML:

<input id="demo" value="4132" />

<ul class="reqs">
  <li><i class="fa fa-check-circle"></i> Test Item</li>
  <li><i class="fa fa-check-circle"></i> Test Item</li>
</ul>

I feel like there is a scope issue but I cannot figure it out.

Upvotes: 0

Views: 933

Answers (3)

Shushanth Pallegar
Shushanth Pallegar

Reputation: 2862

childNumber argument passed is used wrongly in your xOrCheck function ,hence childNumber is not getting it respective action it should be be as below

   $("ul.reqs li:nth-child(" + childNumber + ")

Upvotes: 1

taxicala
taxicala

Reputation: 21759

First, in your html, add quotes to the value:

<input id="demo" value="4132" />

<ul class="reqs">
  <li><i class="fa fa-check-circle"></i> Test Item</li>
  <li><i class="fa fa-check-circle"></i> Test Item</li>
</ul>

And in your js, you are not properly using the function parameter:

function xOrCheck(condition, childNumber) {
    if (condition) {
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-check-circle");
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-times-circle");
    } else {
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-times-circle");
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-check-circle");
    }
}

$('input#demo').on('focus keyup',function(){
 var value = $(this).val();
 var firstChar = value.substring(0,1);
 xOrCheck(firstChar > 5 , 1);
}

And you can simplify everything:

function xOrCheck(condition, childNumber) {
    var $icon = $("ul.reqs li:nth-child(" + childNumber + ") i.fa");
    if (condition) {
       $icon.removeClass("fa-check-circle").addClass("fa-times-circle");
    } else {
       $icon.removeClass("fa-times-circle").addClass("fa-check-circle");
    }
}

Upvotes: 2

15ee8f99-57ff-4f92-890c-b56153
15ee8f99-57ff-4f92-890c-b56153

Reputation: 37060

This is JS, not Perl. There's no variable interpolation in strings. 

function xOrCheck(condition, childNumber) {
    if (condition) {
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-check-circle");
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-times-circle");
    } else {                   "                 "
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").removeClass("fa-times-circle");
       $("ul.reqs li:nth-child(" + childNumber + ") i.fa").addClass("fa-check-circle");
    }
}

Upvotes: 1

Related Questions