JavaScript/jQuery one variable used in two functions best solution ? Example

Question

I'm somehow confused. What is the best way to use one variable as global in jQuery - just to use it two click function ? Here is the code :

http://jsfiddle.net/DyqdA/

HTML :

<div id = "div1">DIV # 1</div>
    <div id = "div2">DIV # 2</div>
    <input type = "button" value = "Click to see whick div you've chosen."/>
    <h1></h1>

jQuery :

$(document).ready(function() { 
    var answer;
    $("#div1").click(function(event) { 
        window.answer = "FIRST";
    }); 

    $("div2").click(function(event) { 
        window.answer = "SECOND";
    });

    $("button").click(function() {
        $("h1").html(window.answer);
    }); 
})(jQuery);

CSS :

#div1 {
    background-color: red; 
    height: 50px;
}
#div2 {
    background-color: blue; 
     height: 50px;
}

I need to SAVE text to the answer variable. Thanks in advance.

Your code is working fine, but your fiddle isn't working because the anonymous scope misses an opening bracket, and because you've written div2 instead of #div2, so the second div doesn't have a click event. Your code, fixed — David Hedlund
– David Hedlund, Commented Apr 11, 2013 at 14:02
@DavidHedlund, in your case, it is unnecessary to declare the 'answer' var as window is already global (and really unrelated to the declared var) — Smern
– Smern, Commented Apr 11, 2013 at 14:15
Unrelated to your variable question, note that using clickable divs makes your page unusable for people who choose not to or are physically unable to use a mouse or other pointing device. Better to use anchor tags since these can be accessed via the keyboard (of course you can still style them). — nnnnnn
– nnnnnn, Commented Apr 11, 2013 at 14:15
@smerny: Sure, I'm not really advocating anything, but OP's question is about how to make a variable global, and I'm just suggesting that perhaps the error here is not that the variable isn't global, but rather a missing ( and #. If the minor syntax errors were not in the fiddle, OP might not have asked the question at all, because the code would've worked. — David Hedlund
– David Hedlund, Commented Apr 11, 2013 at 14:21

James Montagne · Accepted Answer · 2013-04-11 14:05:29Z

4

Just remove window. since this variable isn't global. It is accessible in the context you are trying to use it in:

$(document).ready(function() { 
    var answer;
    $("#div1").click(function(event) { 
        answer = "FIRST";
    }); 

    $("#div2").click(function(event) { 
        answer = "SECOND";
    });

    $("input").click(function() {
        $("h1").html(answer);
    }); 
});

EDIT: And drop that (jQuery) at the end.

EDIT2: Also, div2 should be #div2 and you don't have a button in your html, you have an input of type button.

edited Apr 11, 2013 at 14:05

answered Apr 11, 2013 at 14:00

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

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

Comments

Smern · Accepted Answer · 2013-04-11 14:04:28Z

1

http://jsfiddle.net/DyqdA/1/

$(document).ready(function() {   
    var answer;
    $("#div1").click(function(event) { 
        answer = "FIRST";
    }); 

    $("#div2").click(function(event) { 
        answer = "SECOND";
    });

    $("#displayDivButton").click(function() {
        $("h1").html(answer);
    }); 
})(jQuery);

you were using ("button") but didnt have any "button" tag, you were also using ("div2") instead of ("#div2")... then you can just drop the window as you declared the answer var within the scope of all 3 functions

answered Apr 11, 2013 at 14:04

Smern

19.1k22 gold badges77 silver badges93 bronze badges

Comments

Kapilrc · Accepted Answer · 2015-05-29 14:22:18Z

0

hope you are expecting this:

myVar="Global Scope";

family = function(){

 var myVar="member";

member1= function() {
    console.log(myVar);
};

member2= function() {
    myVar = "member2";
    console.log(myVar);
  };

  member1();
  member2();

};

family();
console.log(myVar);

answered May 29, 2015 at 14:22

Kapilrc

1,55618 silver badges12 bronze badges

Collectives™ on Stack Overflow

JavaScript/jQuery one variable used in two functions best solution ? Example

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related