JavaScript global variable value lost in a function

Question

I have a fairly simple question.

The value of my operationVal gets lost when it enters the click event and if(operationVal == 0 ) returns true. But if i check operationVal just before the event it has the selected value. Furthermore, if i write operation.options[operation.selectedIndex].value instead of operationVal in if in the event, the value grabbed is the correct one instead.

I would be grateful if someone explained me why is that so. I'm assuming it has something to do with JavaScript scope, but it doesn't make sense to me.

const firstNumber = document.getElementById('tbFirstNumber');
const secondNumber = document.getElementById('tbSecondNumber');
const operation = document.getElementById('ddlOperation');
const operationVal = operation.options[operation.selectedIndex].value;
const btn = document.getElementById('btnExecute');
const display = document.getElementById('display');

let result = '';

const regNumbers = /[0-9]{1,}/;

btn.addEventListener('click', function(argument) {
  if (regNumbers.test(firstNumber.value) && regNumbers.test(secondNumber.value)) {
    if (operationVal == 0) {
      alert(operationVal);
      result = 'Operation has not been chosen';
    } else {
      switch (operationVal) {
        case 'add':
          result = 'Result is: ' + (firstNumber.value + secondNumber.value);
          break;
        default:
          // statements_def
          break;
      }
    }
  } else {
    result = 'Number entry is not correct.';
  };

  display.innerHTML = result;
});

We don't have the full picture, but it looks like you are trying to read the user's selected choice before they've had an opportunity to make one? — Andy G
– Andy G, Commented Feb 21, 2018 at 10:24

trincot · Accepted Answer · 2018-02-21 10:24:32Z

2

The following line:

operationVal = operation.options[operation.selectedIndex].value;

gets the selected value at the time this code executes, not at the future time when the user clicks the button.

The simple solution is to move this line inside the event listener callback function.

answered Feb 21, 2018 at 10:24

trincot

357k38 gold badges282 silver badges338 bronze badges

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

Comments

gurvinder372 · Accepted Answer · 2018-02-21 10:24:25Z

0

But if i check operationVal just before the event it has the selected value. Furthermore, if i write operation.options[operation.selectedIndex].value instead of operationVal in if in the event, the value grabbed is the correct one instead.

Looks like your value got changed before the click event

const operationVal = operation.options[operation.selectedIndex].value;

since above line has probably been executed while binding events on your page.

Once operationVal is set, it won't get refreshed automatically when you will select a different value from the drop-down.

You need to set this value again in the event handler

btn.addEventListener('click', function(argument) {
  //observe this line
  operationVal = operation.options[operation.selectedIndex].value;
  if (regNumbers.test(firstNumber.value) && regNumbers.test(secondNumber.value)) {
    if (operationVal == 0) {
      alert(operationVal);
      result = 'Operation has not been chosen';
    } else {
      switch (operationVal) {
        case 'add':
          result = 'Result is: ' + (firstNumber.value + secondNumber.value);
          break;
        default:
          // statements_def
          break;
      }
    }
  } else {
    result = 'Number entry is not correct.';
  };

  display.innerHTML = result;
});

answered Feb 21, 2018 at 10:24

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

1 Comment

Strahinja Strale Sujic Over a year ago

I understand it now. Thanks for a more detailed response.

lmarqs · Accepted Answer · 2018-02-21 10:26:08Z

0

The operarionVal was not selected by the user when it is setted. So you have to put the attribution const operationVal = operation.options[operation.selectedIndex].value; inside the function.

answered Feb 21, 2018 at 10:26

lmarqs

1,47113 silver badges16 bronze badges

Comments

SAMUEL · Accepted Answer · 2018-02-21 10:27:12Z

operationVal value is set when you load the page. and is not updated with respect when your selectbox value changes therefore the value of operationVal remains constant

You need to move

const operationVal = operation.options[operation.selectedIndex].value;

to click event listner may solve the issue

const firstNumber = document.getElementById('tbFirstNumber');
const secondNumber = document.getElementById('tbSecondNumber');
const operation = document.getElementById('ddlOperation');
let operationVal = operation.options[operation.selectedIndex].value;
const btn = document.getElementById('btnExecute');
const display = document.getElementById('display');

let result = '';

const regNumbers = /[0-9]{1,}/;

btn.addEventListener('click', function(argument) {
  if (regNumbers.test(firstNumber.value) && regNumbers.test(secondNumber.value)) {
    operationVal = operation.options[operation.selectedIndex].value;
    if (operationVal == 0) {
      alert(operationVal);
      result = 'Operation has not been chosen';
    } else {
      switch (operationVal) {
        case 'add':
          result = 'Result is: ' + (firstNumber.value + secondNumber.value);
          break;
        default:
          // statements_def
          break;
      }
    }
  } else {
    result = 'Number entry is not correct.';
  };

  display.innerHTML = result;
});

Collectives™ on Stack Overflow

JavaScript global variable value lost in a function

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related