Trying to understand a function

[toniO]

Hello,

I am a beginner in JavaScript and I am currently working on the basic projects such as calculator, weather app, etc. I had trouble understanding the function where the output is shown on the screen. I have the following function and code:

The Function that outputs the user input and the result:

function outputResult(result, text) {
    currentRes.textContent = result;
    currentCalc.textContent = text;
  }

The code:

const defaultResult = 0;
let currentResult = defaultResult;

function getUserInput() {
    return parseInt(userInput.value);
}

function add(){
    const enteredNumber = getUserInput();
    const calcDescription = `${currentResult} + ${enteredNumber}`;
    currentResult = currentResult + enteredNumber;
    outputResult(currentResult + calcDescription);

}

function subtract(){
    const enteredNumber = getUserInput();
    const calcDescription = `${currentResult} + ${enteredNumber}`;
    currentResult = currentResult - enteredNumber;
    outputResult(currentResult + calcDescription);
    
}

function multiply(){
    const enteredNumber = getUserInput();
    const calcDescription = `${currentResult} + ${enteredNumber}`;
    currentResult = currentResult * enteredNumber;
    outputResult(currentResult + calcDescription);
    
}

function devide(){
    const enteredNumber = getUserInput();
    const calcDescription = `${currentResult} + ${enteredNumber}`;
    currentResult = currentResult / enteredNumber;
    outputResult(currentResult + calcDescription);
}

addBtn.addEventListener('click', add);
subtractBtn.addEventListener('click', subtract);
multiplyBtn.addEventListener('click', multiply);
devideBtn.addEventListener('click', devide);

Thank you for any advise and information.

[DanCouper]

@toniO

function outputResult(result, text) {
    currentRes.textContent = result;
    currentCalc.textContent = text;
  }

This doesn’t really make sense.

So

@toniO

const defaultResult = 0;
let currentResult = defaultResult;

function getUserInput() {
    return parseInt(userInput.value);
}

currentResult is a number. It’s not an object. And it doesn’t have a property textContent

userInput isn’t defined anywhere, so getUserInput is running, at best, if it doesn’t error, parseInt(null), which returns NaN (null is not a number).

So

@toniO

function add(){
    const enteredNumber = getUserInput();
    const calcDescription = `${currentResult} + ${enteredNumber}`;
    currentResult = currentResult + enteredNumber;
    outputResult(currentResult + calcDescription);

}

enteredNumber is NaN.
calcDescription is "0 + NaN".
currentResult is NaN or an error.

Then you are trying to pass to the function outputResult the sum of NaN and the string "0 + NaN". However, the + will concatenate rather than add, so you’re passing the single argument "NaN0 + NaN". The function is supposed to take two arguments (a number and a string).

Again, it’ll probably have errored by this point anyway.

You are then running this add function when someone clicks the add button.

---

You need:

1. A reference to the HTML element you are rendering the result to, saved as a variable. This will not change, you don’t need to overwrite it, get it at the top of your program.
2. A reference to the HTML element you are rendering the text to. Same thing as above.

These are objects. And they have a textContent property. Then you need:

3. An element or elements that have the numbers you need.
4. In the functions that trigger on clicks, you need to get those numbers.
5. Then you have actual numbers, which you can then use to write the result/text to the elements 1 & 2

There may be some code missing from your example. If that’s the case, apologies for mentioning stuff you’ve already tried to include. If possible, post a link to codepen or whatever, it’s easier to debug

[toniO]

Thank you for your reply.

Here is the HTML code:

My First Calculator

<div class = "main">
    <input type = "number" id = "input-number">
</div>
<div class = "operations">
    <button type="button" id = "add-button"> + </button>
    <button type="button" id = "subtract-button"> - </button>
    <button type="button" id = "multiply-button"> * </button>
    <button type="button" id = "devide-button"> / </button>
</div>
<div class = "resultMenu">
    <h3 id = "current-calculation">0</h3>
    <h3>Result: <span id="current-result">0</span></h3>
</div>
<script src = "scripts/connect-buttons.js"></script>
<script src = "scripts/app.js"></script>