CODEWITHSUNDEEP
javascriptjquery
Clyde
Clyde

Reputation: 71

JQuery if else statement stops at second condition

I've been trying to fix this problem since last night and still no luck. I badly need help in this. Here's the situation: I have 4 clickable images, each with a clickCount textbox on my html file. The clickCount textbox will display how many times the image was clicked. I got the first 2 images working, but when I click the 3rd image the clickCount textbox on the 2nd image increments. Here's my code:

    <script> 
  var targetId="";

 $(".foods").click(function(event) {
  if (event.target.id=="img1"){
  targetId="img1clickCount";
    addOrders();}

else if(event.target.id="img2"){
  targetId="img2clickCount";
    addOrders();    }

else if(event.target.id="img3"){
  targetId="img3clickCount";
    addOrders();    }

else if(event.target.id="img4"){
  targetId="img4clickCount";
    addOrders();    }

}); });

function addOrders(){
document.getElementById(targetId).value=parseInt(document.getElementById(targetId).
    value)+1;
}
  </script>

<body>
<table cellpadding=0 cellspacing=0 border=1 height=330 style="margin-left:18px">
<tr>

 //Images
<td><img src="gangjeong.png" width="100" style="cursor:pointer" id="img1"                              
class="foods"></td>
<td><img src="daktoritang.png" width="100" style="cursor:pointer" id="img2"
class="foods"></td>
<td><img src="tangsuyuk.png" width="100" style="cursor:pointer" id="img3"      
class="foods"></td>
<td><img src="tangsuyuk.png" width="100" style="cursor:pointer" id="img4"      
class="foods"></td>
<tr height="5">

//Textboxes
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img1clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img2clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img3clickCount">
</td>
<td><input type="text" maxlength="5" readonly="readonly" value="0" id="img4clickCount">
</td>
</tr></table>

Upvotes: 0

Views: 265

Answers (6)

Pandiyan Cool
Pandiyan Cool

Reputation: 6565

Check == in your other conditions

Make it

$(".foods").click(function(event) {
  if (event.target.id=="img1") {
    targetId="img1clickCount";
    addOrders();
  }
  else if(event.target.id=="img2") {
    targetId="img2clickCount";
    addOrders();
  }
  else if(event.target.id=="img3"){
    targetId="img3clickCount";
    addOrders();
  }
  else if(event.target.id=="img4"){
    targetId="img4clickCount";
    addOrders();
  }
})

Upvotes: 1

Barmar
Barmar

Reputation: 780843

Everyone else already pointed out your =/== typo.

But instead of all the if/then/elseif, use a DRY method:

targetId = this.id + clickCount;
addOrders();

Note that you don't need to use event.target when using jQuery, it binds this to the target element in all event handlers.

I also suggest that instead of setting a global variable, pass targetId as a parameter to addOrders.

Upvotes: 0

MD Sayem Ahmed
MD Sayem Ahmed

Reputation: 29166

Rewrite your code like this, it's much simpler -

$(".foods").click(function(event) {
    addOrders($(this).attr('id') + 'clickCount');
});

function addOrders(targetId){
    var value = parseInt(
        $('#' + targetId).val()) + 1;
    $('#' + targetId).val(value);
}

Upvotes: 0

Jonathan
Jonathan

Reputation: 5993

You should use === for your comparisons

else if(event.target.id === "img2"){

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

you need to use == instead of = for comparison, the former is the comparison operator where as the later is the assignment operator

Upvotes: 0

Joachim Isaksson
Joachim Isaksson

Reputation: 180897

First condition;

if (event.target.id=="img1"){      // Compares

Second condition;

if (event.target.id="img2"){       // Uses = (ie assigns, not compares)

Upvotes: 3

Related Questions