Javascript else if statement not working

Question

I have the following:

HTML

<div class="tab-pane" id="message">
      <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
      <a href="#message" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>

JavaScript

$('#message').click(function(){
    if($("a", this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } else if($("a", this).is(":contains(Cancel)"))  {
        console.log("im in cancel!!");
    }
});

This works fine when I hit the OK button and executes as expected, however when I hit cancel the code in OK is executed only. The cancel code never executes! What am I doing wrong?

Why should it execute if a:contains('OK') still exists in a #message? — u_mulder
– u_mulder, Commented Aug 12, 2013 at 18:17
It never enter the else if since $("a", this) contains both OK and Cancel — zs2020
– zs2020, Commented Aug 12, 2013 at 18:18

gen_Eric · Accepted Answer · 2013-08-12 18:44:08Z

9

this is the element the event is bound to. It's always #message, therefore $("a", this) will always be the both buttons. .is will scan both buttons to see if any of them contain "OK". The first one does, so it always goes to the 1st block.

You should be binding the events to the buttons themselves, not the entire div.

edited Aug 12, 2013 at 18:44

answered Aug 12, 2013 at 18:17

gen_Eric

228k42 gold badges304 silver badges343 bronze badges

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

2 Comments

user1592380 Over a year ago

I'm (obviously) new to JS , but I figured it would be easiest to understand to bind the div and then select the children input elements. Are you saying that $("a", this) always picks the first 'a' that it comes across in the context of this?

gen_Eric Over a year ago

@user61629: I'd suggest that as a beginner, you should bind to each button individually. I was actually wrong. $("a", this) picks both. .is will scan everything in the set, so it always finds OK.

Ionică Bizău · Accepted Answer · 2013-08-12 18:17:22Z

2

Detect clicks on a from #message, instead. this will become the clicked <a>.

$('#message').on("click", "a", function(){
    if($(this).is(":contains(OK)")) {
        console.log("im in OK!!");
    } 
    else if($(this).is(":contains(Cancel)"))  {
            console.log("im in cancel!!");
    }
});

JSFIDDLE

answered Aug 12, 2013 at 18:17

Ionică Bizău

114k95 gold badges311 silver badges490 bronze badges

4 Comments

user229044 Over a year ago

Fixing the code isn't useful without explaining what was wrong with the original code.

Ionică Bizău Over a year ago

@meagar You are correct. I always prefer to be faster and then to edit my answer adding more content.

Ionică Bizău Over a year ago

@meagar Anyway the antispam stopped me to be first... :-)

Christophe Over a year ago

@Johnツ why would you choose to provide an incomplete answer faster over just providing the right answer?

Greeso · Accepted Answer · 2013-08-12 18:19:15Z

1

Fist, I noticed you have a missing closing div (</div>)

Just curious, why not do the following:

$("#OK").click (function() {
    console.log("im in OK!!");
});

$("#Cancel").click (function() {
    console.log("im in Cancel!!");
});

<div class="tab-pane" id="message">
    <textarea rows="4" cols="50" id="send_message" placeholder="Enter text ...">  </textarea>
    <a href="#message" id="OK" class="btn btn-large btn-info"  data-toggle="tab">OK</a>
    <a href="#message" id="Cancel" class="btn btn-large btn-info"  data-toggle="tab">Cancel</a>
</div>

Cheers.

answered Aug 12, 2013 at 18:19

Greeso

8,42915 gold badges58 silver badges86 bronze badges

Collectives™ on Stack Overflow

Javascript else if statement not working

HTML

JavaScript

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

HTML

JavaScript

3 Answers 3

2 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related