CODEWITHSUNDEEP
javascriptif-statementconditional-statements
Split2nd
Split2nd

Reputation: 13

javascript conditional not reaching else

I'm working on creating a toggle function to 'favorite' an item from a list of many. I've got working script to toggle the item in and out of a user-specific favorites list, communicate that change to a database, and populate the rest of the site accordingly. That all works fine, it's mostly PHP and Ajax. However, my javascript is ass. I'm stuck on a conditional to change the icon from a filled heart to an empty one. For some reason it never reaches the else statement even when the if statement is false. If I reverse the conditions, it still handles the if fine but never the else.

the image is:

<img src="includes/icons/fave-<?php echo $favStatus; ?>.png" id="faveToggle" class="faveIcon" onClick="toggleFave()">

the conditional, located in toggleFave() is:

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")){
    document.getElementById('faveToggle').src = "includes/icons/fave-true.png";
} else {
    document.getElementById('faveToggle').src = "includes/icons/fave-false.png";
}

So, uhh, whuddo I do?

Upvotes: 0

Views: 121

Answers (5)

Nina Scholz
Nina Scholz

Reputation: 386848

You can use the bitwise not ~ operator for checking.

~ is a bitwise not operator. It is perfect for use with indexOf(), because indexOf returns if found the index 0 ... n and if not -1:

value  ~value   boolean
 -1  =>   0  =>  false
  0  =>  -1  =>  true
  1  =>  -2  =>  true
  2  =>  -3  =>  true
  and so on 

if(~document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")){

Upvotes: 0

yuvi
yuvi

Reputation: 18457

Here's my simplified version using a ternary operator:

var toggle   = document.getElementById('faveToggle'),
    newState = toggle.src.toString().indexOf("fave-false.png") == -1 ? true : false;

toggle.src = "includes/icons/fave-"+newState+".png";

Upvotes: 0

brk
brk

Reputation: 50346

You can checkif it is greater than -1

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png")>-1){
alert('1')   
 document.getElementById('faveToggle').src = "includes/icons/fave-true.png";
} else {
alert("2")
    document.getElementById('faveToggle').src = "includes/icons/fave-false.png";
}

jsfiddle

Upvotes: 0

Pointy
Pointy

Reputation: 413996

You only need to fetch the element once:

var toggle = document.getElementById("faveToggle");
if (toggle.src.indexOf("fave-false.png") >= 0) {
    toggle.src = "includes/icons/fave-true.png";
} 
else {
    toggle.src = "includes/icons/fave-false.png";
}

The .indexOf() function returns the position of the searched-for substring, or -1 if it isn't found.

Upvotes: 1

James Thorpe
James Thorpe

Reputation: 32212

indexOf returns the 0-based index of where the substring is found, or -1 if not. -1 happens to be "truthy".

That means you have two possibilities, it's either in the string and has a positive (truthy) position, or it's not and you get a truthy -1. Either way, it will always go into the first block. You want:

if(document.getElementById('faveToggle').src.toString().indexOf("fave-false.png") > 0){

Upvotes: 1

Related Questions