Struggling with making my multiplication "calculator" work

Question

I am struggling to make the two numbers i put in the text field multiply and show me the answer to the multiplication. Here is how it should look like when i click the multiply numbers button:(https://i.stack.imgur.com/WXEkm.png)](https://i.stack.imgur.com/WXEkm.png)

So i have tried what is shown here:

<script>
      var userInput1 = document.getElementById("user-input-1");
      var userInput2 = document.getElementById("user-input-2");
      var numbersBtn = document.getElementById("numbers-btn");
      var outputDiv = document.getElementById("output-div");

      numbersBtn.onclick = getMultiplication;

      var number1 = userInput1.value;
      var number2 = userInput2.value;

      function getMultiplication(number1, number2) {
        var result = number1 * number2;
        return result;
      }

      outputDiv.innerHTML = getMultiplication(number1, number2);
    </script>

It looks like this on the webpage:(https://i.stack.imgur.com/HxMCT.png)](https://i.stack.imgur.com/HxMCT.png)

The when i type numbers in the boxes and click the button, nothing happens and no error in the console log.

I have also tried without .value behind the userInputs, but then it displays NaN. I have also tried som other orders of the code, still no luck.

(Im very new to JS and parameters is one of my biggest weaknesses).

`numbersBtn.onclick = getMultiplication` causes the `getMultiplication` function to be invoked with the [`Event`](//developer.mozilla.org/en/docs/Web/API/Event) object corresponding to the click. `number1` and `number2` will _not_ be passed. — Sebastian Simon, Nov 09 '22 at 14:52

score 1 · Accepted Answer · answered Nov 09 '22 at 14:45

You need to get the values of number1 and number2 inside your click event

var userInput1 = document.getElementById("user-input-1");
var userInput2 = document.getElementById("user-input-2");
var numbersBtn = document.getElementById("numbers-btn");
var outputDiv = document.getElementById("output-div");

numbersBtn.onclick = ()=> {
    var number1 = userInput1.value;
    var number2 = userInput2.value;  
    outputDiv.innerHTML = getMultiplication(number1, number2);
}

function getMultiplication(number1, number2) {
  var result = number1 * number2;
     return result;
}

<input type="number" id="user-input-1">
<input type="number" id="user-input-2">
<button id="numbers-btn">Multiply Numbers</button>
<div id="output-div">0</div>

Another way to do the same functionality

let userInput1 = document.getElementById("user-input-1"),
    userInput2 = document.getElementById("user-input-2"),
    numbersBtn = document.getElementById("numbers-btn"),
    outputDiv = document.getElementById("output-div");

numbersBtn.onclick = ()=> {
    outputDiv.innerHTML = userInput1.value * userInput2.value;
}

<input type="text" id="user-input-1">
<input type="text" id="user-input-2">
<button id="numbers-btn">Multiply Numbers</button>
<div id="output-div">0</div>

XCS · Answer 2 · 2022-11-09T14:39:59.923

First of all, you input the numbers after your code is executed, so you must read them when the button is clicked, not on page load. You also want to set the output contents whenever the button is clicked, so set the output innerHTML inside your function.

      var number1 = userInput1.value;
      var number2 = userInput2.value;

      function getMultiplication(number1, number2) {
        var result = number1 * number2;
        return result;
      }
      outputDiv.innerHTML = getMultiplication(number1, number2);

To

      function getMultiplication() {
        var number1 = userInput1.value;
        var number2 = userInput2.value;
        var result = number1 * number2;
        outputDiv.innerHTML = result;
      }

Here is a fully functional demo:

var userInput1 = document.getElementById("user-input-1");
var userInput2 = document.getElementById("user-input-2");
var numbersBtn = document.getElementById("numbers-btn");
var outputDiv = document.getElementById("output-div");

numbersBtn.onclick = getMultiplication;

function getMultiplication(number1, number2) {
  var number1 = +userInput1.value;
  var number2 = +userInput2.value;
  var result = number1 * number2;
  outputDiv.innerHTML = result;
}

<input type="number" id="user-input-1" value="0"/>
<input type="number" id="user-input-2" value="0"/>
<button id="numbers-btn">
Calculate
</button>

<div id="output-div">
0
</div>

Secondly, the value of inputs is stored as a string, so it is good practice to convert it to a number, for example by writing var number1 = Number(userInput1.value);. In your case, it's not really necessarily because the multiplication operator automatically tries to cast the operands to numbers.

score -1 · Answer 3 · answered Nov 09 '22 at 14:47

-1

By default JavaScript is considering values as strings you should use parseInt or parseFloat before any mathematical processing use number1=parseInt(number1) and number2=parseInt(number2) in your above mentioned function before multipliccation.

answered Nov 09 '22 at 14:47

Kader Khan

15
3

No, this does not matter for multiplication. Please use `parseInt` [_with_ the second parameter, `10`](/q/16880327/4642212). Consider using [`Number`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number#Function_syntax) or [`parseFloat`](//developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseFloat) instead, or, specifically for ``s, [`.valueAsNumber`](//developer.mozilla.org/en/docs/Web/API/HTMLInputElement#Properties). – Sebastian Simon Nov 09 '22 at 14:53

Struggling with making my multiplication "calculator" work

3 Answers3