0

How do I check if a variable has a value when a dynamically created button is clicked?

This is what have done but doesn't work.

var name;
$(document).on('click', '#test', function(){
   if (typeof name === "undefined"){
     //pass message
   }else{
     //do something
   }
});
Becky
  • 5,467
  • 9
  • 40
  • 73
  • 2
    A variable will *always* have a value. That value will just be `undefined` if it hasn't been initialized. Did you declare `name` somewhere? What exactly "doesn't work"? – Mike Cluck Jun 02 '16 at 15:14
  • What is your expected output and the conditions leading to that? – Charlie Jun 02 '16 at 15:16
  • @MikeC THanks for you comment. See my edit. `var name;` (no value to begin with and it'll be updated later. But I need to be certain if the value is passed before `#test` is clicked) – Becky Jun 02 '16 at 15:16
  • 2
    Please elaborate on the "doesn't work" part. Provide a more complete example. See [mcve] and [ask]. – Felix Kling Jun 02 '16 at 15:17
  • 1
    The default value of a variable is `undefined`. You are declaring `name`, but not assigning it a value, so `typeof name` will equal `undefined.` – Jeremy J Starcher Jun 02 '16 at 15:17
  • @FelixKling itThanks. `if (typeof name === "undefined"){` is always true (does `//pass message`) and never goes to the else statment. But if I remove the if else statement it does the `//do something`. – Becky Jun 02 '16 at 15:20
  • 1
    Well, in the code you posted you are never changing the value of `name`. Unless you assign a new value, `typeof name === "undefined"` stays `true`. – Felix Kling Jun 02 '16 at 15:21
  • 1
    @Felix: Given what we know so far, then, isn't this question unduly closed? – David Hedlund Jun 02 '16 at 15:33
  • @DavidHedlund: IMO yes. But the OP also didn't provide a new information unfortunately :-/ – Felix Kling Jun 02 '16 at 15:33
  • If "But if I remove the if else statement it does the `//do something`" you mean replace the if-else with just the `//do something` that is just the expected behavior. If you want to access the "name" attribute of the button you shout try something like `this.name` (instead of `typeof name === "undefined"`). – Prusse Jun 02 '16 at 15:41
  • @Prusse Thanks. This is what I'm doing. In my external js file, I do var name; and as the page loads var name gets updated as name = '123'. Then in my main file I have these dynamic button being populated. I only need to make sure that the name variable is having a value at the time this dynamic button is clicked. Can you please tell me where is the issue and how can I achieve this? – Becky Jun 02 '16 at 15:44

1 Answers1

1

1. Don't call your variable name
Try to call your variable something else, as name is in many scenarios overwritten for other purposes. It's likely not the entire solution to your problem, but it can be a confounding factor moving forward, so I strongly advise against this variable name. I don't know what's a meaningful name in your use, so in my examples, I will simply call the variable x.

2. Verify that the variable is being set
If your problem is that typeof x === 'undefined' is always true, your first action should be to check the code where x is being set. You haven't shown us any of this code. If you are indeed writing x = 123; in an external file, throw in an alert(x); immediately after that statement, to make sure that that specific piece of code is actually executing, and that the variable is being set according to your expectations.

3. Verify that your event listener is working
In your code, the code moves on to pass message if the variable is undefined. You're saying that the variable is always undefined. Could there be any other code that is calling pass message? Throw in an alert(x) here as well, to see that it really is entering the click listener, and that x is undefined.

4. Check the scope of your variable
If alert(x) did indeed show that x was defined and had a value in your script, and a subsequent button click showed that x was undefined (and you don't have any intermediate code saying anything like x = undefined), you are almost certainly facing a scoping issue. Either the script that is assigning x is writing to a local variable that is not accessible to your click listener, or the click listener is reading from a local variable that has priority over a global variable of the same name.

If you are sharing variables between separate scopes, you will need to rely on something that both pieces of code has access to, such as the global scope. If your external script executes window.x = 123; instead, you will have a globally accessible variable named x. In your click listener, you can test whether this is defined by the condition if(typeof window.x === 'undefined')

David Hedlund
  • 128,221
  • 31
  • 203
  • 222
  • The OP says `typeof name === "undefined"` is always true, so this doesn't seem to be executed in global scope. – Felix Kling Jun 02 '16 at 15:23
  • Thanks. `if (typeof name === "undefined"){` is always true (does `//pass message`) and never goes to the else statement. But if I remove the if else statement it does the `//do something`. – Becky Jun 02 '16 at 15:24
  • @Felix: Yes, I saw that comment after posting this. Will be monitoring this for further information, and will delete this answer if it turns out to be truly unrelated (as indeed it appears to be). – David Hedlund Jun 02 '16 at 15:26
  • @Becky: You're saying `name` is *always* undefined, so I'm assuming you're not in global scope after all, but this could still well be a scoping issue. You haven't shown us where you are assigning to `name`. In which scenarios are you expecting `name` to be defined? – David Hedlund Jun 02 '16 at 15:27
  • I'm assigning `var name;` in an external js and I'm using the if else statement on the main page. IS the the reason? Do I have to do something like `window.name;` ? – Becky Jun 02 '16 at 15:33
  • By writing `var name;` you're still not assigning a value. It will still be undefined. `var name = 123;` is an example of code that will make `typeof name === 'undefined'` yield false. – David Hedlund Jun 02 '16 at 15:34
  • Thanks you. Okay this is what I'm doing. In my external js file, I do `var name;` and as the page loads `var name` gets updated as `name = '123'`. Then in my main file I have these dynamic button being populated. I only need to make sure that the `name` variable is having a value at the time this dynamic button is clicked. Can you please tell me where is the issue and how can I achieve this? – Becky Jun 02 '16 at 15:41
  • @Becky: We're not seeing a lot of your code, so it is difficult to tell. I've edited my answer to include some debugging steps. Let us know where you're facing problems. – David Hedlund Jun 02 '16 at 16:05