Struggling with making my multiplication "calculator" work-CodePudding

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).

CodePudding user response：

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>

CodePudding user response：

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);

      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.

CodePudding user response：

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.