Problem concerning the distinction between local and global scope as well as the presence

Question

Problem concerning the distinction between local and global scope as well as the presence

I have this code snippet for creating a calculator:

const numbers = document.querySelector('.numbers')
const display = document.querySelector('.display')
const functions = document.querySelector('.functions')
const equalClear = document.querySelector('.equalClear')

numbers.addEventListener('click', e => {
    // adding number to display
   if(e.target.innerHTML == '1'){
       display.innerHTML += '1';
   }else if (e.target.innerHTML == '2'){
       display.innerHTML += '2';
   }else if (e.target.innerHTML == '3'){
    display.innerHTML += '3';
}else if (e.target.innerHTML == '4'){
    display.innerHTML += '4';
}else if (e.target.innerHTML == '5'){
    display.innerHTML += '5';
}else if (e.target.innerHTML == '6'){
    display.innerHTML += '6';
}else if (e.target.innerHTML == '7'){
    display.innerHTML += '7';
}else if (e.target.innerHTML == '8'){
    display.innerHTML += '8';
}else if (e.target.innerHTML == '9'){
    display.innerHTML += '9';
}else if (e.target.innerHTML == '0'){
    display.innerHTML += '0';
}
});

functions.addEventListener('click', e => {
    // selecting a function and displaying it
    if(e.target.innerHTML == 'Add'){
        display.innerHTML += '+';
        functionVal = add();
    } else if(e.target.innerHTML == 'Subtract'){
        display.innerHTML += '-';
        functionVal = subtract();
    } else if(e.target.innerHTML == 'Multiply'){
        display.innerHTML += '*';
        functionVal = multiply()
    } else if(e.target.innerHTML == 'Divide'){
        display.innerHTML += '/';
        functionVal = divide();
    }else{
        display.innerHTML + 'Error'
    }
    numberVal = display.innerText;
    console.log(numberVal, "numberVal");
    console.log(functionVal, "functionVal");
});

equalClear.addEventListener('click', e => {
    if(e.target.innerHTML === 'Clear'){
        display.innerHTML = "";
    } 
    else if(e.target.innerHTML = '='){
    }
})

//calculator functions

function add(variable1, variable2) {
    return variable1 + variable2;
};

function subtract(variable1, variable2) {
    return variable1 - variable2;
}

function multiply(variable1, variable2) {
    return variable1 * variable2;
};

function divide(variable1, variable2) {
    return variable1 / variable2;
}

// operation in calculator

function operate(operator, num1, num2){
   operate = operator, num1, num2;
}

operate(functionVal(numberVal,5))
console.log(operate, "this is an operation");

I am facing issues with calling "functionVal" and "numberVal" within the "operate" function. They are showing as undefined due to local scope. I attempted to give them global scope using "var" but had no success. Any suggestions on how to resolve this would be greatly appreciated.

Another concern is that when I try to log "functionVal" in "functions.AddEventListener," it displays NAN instead of the assigned function value. I expected it to show the actual function defined for "add" upon clicking the corresponding button. Any insights on what could be causing this discrepancy?

Thank you in advance for any assistance!

Best regards, A JavaScript beginner

javascript function scope nan addeventlistener

Answer 1

Answer №1

Initially, it is not advisable to check equality using the === operator for different types:

numbers.addEventListener('click', e => {
    // selecting and adding number to display
    if(e.target.innerHTML == '1'){
        display.innerHTML += '1';
    }else if (e.target.innerHTML == '2'){
        display.innerHTML += '2';
    }else if (e.target.innerHTML == '3'){
        display.innerHTML += '3';
    }else if (e.target.innerHTML == '4'){
        display.innerHTML += '4';
    }else if (e.target.innerHTML == '5'){
        display.innerHTML += '5';
    }else if (e.target.innerHTML == '6'){
        display.innerHTML += '6';
    }else if (e.target.innerHTML == '7'){
        display.innerHTML += '7';
    }else if (e.target.innerHTML == '8'){
        display.innerHTML += '8';
    }else if (e.target.innerHTML == '9'){
        display.innerHTML += '9';
    }else if (e.target.innerHTML == '0'){
        display.innerHTML += '0';
    }
});

A more efficient way would be:

numbers.addEventListener('click', e => { 
    display.innerHTML += e.target.innerHTML;
}

If I understand correctly, `numbers` should be an array of buttons with numbers. Using `querySelector` only returns the first button. You should utilize `querySelectorAll` like this:

const numbersButtons = document.querySelectorAll('.numbers');
// convert to array as we cannot iterate over querySelectorAll result directly
Array.from(numbersButtons).forEach((button,index) => {
    button.addEventListener('click', e => {
        display.innerHTML += e.target.innerHTML;
    }
});

Functions should also be stored in an array for clarity. You can create a map of functions like so:

const functionsMap = {
    '+': add,
    '-': subtract
    //add other functions here
}

You can call them in this manner:

// will return the add function
const targetFunc = functionsMap['+'];
// calling with parameters
targetFunc(1,2);

Executing `functionVal = divide();` does not pass a reference to the function, instead, it executes it, resulting in storing the returned value in `functionVal`, which might be `NaN` if the function was executed without parameters.

It's important to carefully review your code and address any mistakes from the beginning.

Answer 2

Initially, it is not advisable to check equality using the === operator for different types:

numbers.addEventListener('click', e => {
    // selecting and adding number to display
    if(e.target.innerHTML == '1'){
        display.innerHTML += '1';
    }else if (e.target.innerHTML == '2'){
        display.innerHTML += '2';
    }else if (e.target.innerHTML == '3'){
        display.innerHTML += '3';
    }else if (e.target.innerHTML == '4'){
        display.innerHTML += '4';
    }else if (e.target.innerHTML == '5'){
        display.innerHTML += '5';
    }else if (e.target.innerHTML == '6'){
        display.innerHTML += '6';
    }else if (e.target.innerHTML == '7'){
        display.innerHTML += '7';
    }else if (e.target.innerHTML == '8'){
        display.innerHTML += '8';
    }else if (e.target.innerHTML == '9'){
        display.innerHTML += '9';
    }else if (e.target.innerHTML == '0'){
        display.innerHTML += '0';
    }
});

A more efficient way would be:

numbers.addEventListener('click', e => { 
    display.innerHTML += e.target.innerHTML;
}

If I understand correctly, `numbers` should be an array of buttons with numbers. Using `querySelector` only returns the first button. You should utilize `querySelectorAll` like this:

const numbersButtons = document.querySelectorAll('.numbers');
// convert to array as we cannot iterate over querySelectorAll result directly
Array.from(numbersButtons).forEach((button,index) => {
    button.addEventListener('click', e => {
        display.innerHTML += e.target.innerHTML;
    }
});

Functions should also be stored in an array for clarity. You can create a map of functions like so:

const functionsMap = {
    '+': add,
    '-': subtract
    //add other functions here
}

You can call them in this manner:

// will return the add function
const targetFunc = functionsMap['+'];
// calling with parameters
targetFunc(1,2);

Executing `functionVal = divide();` does not pass a reference to the function, instead, it executes it, resulting in storing the returned value in `functionVal`, which might be `NaN` if the function was executed without parameters.

It's important to carefully review your code and address any mistakes from the beginning.

Problem concerning the distinction between local and global scope as well as the presence

Answer №1

Similar questions

Table that is sized to fit perfectly within the entire width of the viewport

To trigger a pop-up window displaying a link upon clicking the submit button

Save the information from a particular block into a JSON or text file using Node.js

Problem with OnClick function in Firefox

The concealment of the container is ineffective when attempting to hide it until all cached images are

Showing changes in state in real-time using ReactJS: A quick guide

Why is my data not being sent with the $http POST request in AngularJS?

Error: Issue encountered while attempting to download file using express.js res.download

Managing backbone models on the server side and in memory

What is the best way to navigate to a different page, such as Google, using Node.js?

Adjust the clarity of the elements within my HTML document

Please be cautious not to directly change the state. Remember to always use setState() in ReactJS to update

Should I incorporate PHP/HTML code or opt for using a function instead?

URL JSON data will not display markers

Ember.js encountering an "Access-Control-Allow-Origin" error with Ajax

Tips on extracting information from a table containing a mix of HTML elements

Assistance from ChromeDriver for clicking in situations where zoom level is not at 100%

Is it possible that MapBoxGL installation with Expo doesn't function properly for web?

Click event dynamically bound to list items

"Transmit the document by utilizing the file ID in the form of