JavaScript variable returns undefined from inside if / function statement

Question

I don't understand why my global var doesn't work inside of the if statement / function.

myBtn = ["btn01", "btn02", "btn03", "btn04"];
var i;
var btnId;
for (i = 0; i < myBtn.length; i++) {
  if (document.getElementById(myBtn[i])) {
    btnId = myBtn[i];
    document.getElementById(btnId).addEventListener("click", function() {
      btnValue = document.getElementById(btnId).value;
      btnName = document.getElementById(btnId).name;
    });
  }
};
console.log(btnValue);
/* Then continue on to use the values from btnValue and btnName */

What its meant to do;

Check if Id on button exists in HTML page

If exist then get the following tags (id=, value=, name=)

Then have the 3 values usable outside of the if statement above.

The console.log(btnValue); displays undefined

You're seeing an event handler and immediately trying to log a value that won't be set until the event handler fires. — Dave Newton, Oct 13 '18 at 23:35
Why do you expect `console.log(btnValue)` to work when you are only setting these values in a `click` handler. Regardless of other issues that may be in the code, nothing will happen until the click hander fires. — Mark, Oct 13 '18 at 23:36
@QuentinVeron Undeclared variables are global in the browser. — Dave Newton, Oct 13 '18 at 23:36
you need to do this -> `var btnValue; var btnName` underneath var btnId; — Mohammed, Oct 13 '18 at 23:39
@MarkMeyer That's correct, I have addEventListener on each button, once clicked will get the value and name tags, then continue to the next part. in the code I have just put console.log — seefah, Oct 13 '18 at 23:41
@Mohammed I added this, but regardless of which button I press, the values of the btnValue and btnName are from the last button in the HTML page. — seefah, Oct 13 '18 at 23:53
@Ivar Thanks, but I don't see how to fit callback into my code, only recently learning all this. — seefah, Oct 14 '18 at 00:21

score 0 · Answer 1 · edited Oct 15 '18 at 12:15

0

I don’t really understand what you are trying to get at here. First of all, you need to declare your variable btnValue outside of the function and then change its value on click. Second of all, when you run this the console log runs first. Console.log is also a function and so it gets pushed to the top. Lastly even if the value changes there is nothing making it console.log again for you to get that value.... you need to register an action to the change. Possibly in the form of an observable. Or at least make it console.log on every click...

edited Oct 15 '18 at 12:15

Mohammed

555
1
6
19

answered Oct 14 '18 at 04:04

Pari Baker

696
4
19

Sorry, I try to make a better explanation of what the code does / needs to do. I have a HTML page with several buttons which contain the following tags; id, value and name. Each button id just increases by 1 (so btn01, btn02, ...). Then I want to use JavaScript addEventListener to listen for the click on each button. Only one of the buttons will be pressed for that page at the user’s choice. – seefah Oct 14 '18 at 16:26
On some pages there will be more buttons and on other pages there will be less buttons, so I have the if document.getElementById statement to first check if there is a button id present in the page before adding an addEventListener for that button. – seefah Oct 14 '18 at 16:26
Having code for the ‘if’ statement and getting the button tag values works fine without the ‘for’ loop, but because there could be up to 10 buttons on a page, it seemed logical to use a ‘for’ loop to reduce the amount of code. – seefah Oct 14 '18 at 16:27
Introducing the ‘for’ loop seems to have introduced the problem, although it seemed like maybe the if statement was the issue, but it wasn’t before when there was no ‘for’ statement. – seefah Oct 14 '18 at 16:27
So what currently happens with the ‘for’ statement in the code is regardless of what button is pressed, only the last button’s value and name are shown, which I don’t want unless it is the last button pressed. – seefah Oct 14 '18 at 16:27
Its almost like the addEventListener is being overwritten for each button or something. I’m just confused as to how to make this work the way I want it to. – seefah Oct 14 '18 at 16:27

JavaScript variable returns undefined from inside if / function statement

1 Answers1