Custom function does not read values from input-CodePudding

I am attempting to create a calculator like thing. I have a custom function that is suppose to load input value from two variables and them put them together but it did not work, so I checked with console log if it loads the input value, and all it says is that the values are undefined. Any idea how to fix this please?

let num1 = document.getElementById("number1").value,
    num2 = document.getElementById("number2").value,
    operator = document.getElementById("select"),
    resolutor = document.getElementById("resolute"),
    res = document.getElementById("result");

function mathoperation(num1, num2) {
    let value = operator.value,
        result;

    switch (value) {
        case "plus":
            console.log(num1); //console says unindefied
            console.log(num2); //console says unindefied
            break;
    }
}

<html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Úloha 18.1</title>
  </head>
  <body>

      <input type="text" id="number1">
      
      <select name="" id="select">
          <option value="plus"> </option>
          <option value="minus">-</option>
          <option value="krat">*</option>
          <option value="deleno">/</option>
      </select>
      
      <input type="text" id="number2">
      <input type="button" id="resolute" value="=" onclick="mathoperation()">
      <input type="text" id="result" readonly>

  </body>
  </html>

CodePudding user response：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Úloha 18.1</title>
</head>
<body>
    
    <input type="text" id="number1">
    <select name="" id="select">
        <option value="plus"> </option>
        <option value="minus">-</option>
        <option value="krat">*</option>
        <option value="deleno">/</option>
    </select>
    <input type="text" id="number2">
    <input type="button" id="resolute" value="=" onclick="mathoperation()">
    <input type="text" id="result" readonly>

    <script>

    

    function mathoperation(num1, num2) {
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var operator = document.getElementById("select");
var resolutor = document.getElementById("resolute");
var res = document.getElementById("result");
    
       let
           value = operator.value,
           result;
           
           switch (value) {
            case "plus":
        res.value = parseInt(num1) parseInt(num2);
                break;
            
           }

    }


    </script>
</body>
</html>

Moving your assignment inside the function can solve this.

This should get you started-

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Úloha 18.1</title>
</head>
<body>
    
    <input type="text" id="number1">
    <select name="" id="select">
        <option value="plus"> </option>
        <option value="minus">-</option>
        <option value="krat">*</option>
        <option value="deleno">/</option>
    </select>
    <input type="text" id="number2">
    <input type="button" id="resolute" value="=" onclick="mathoperation()">
    <input type="text" id="result" readonly>

    <script>

    

    function mathoperation(num1, num2) {
var num1 = document.getElementById("number1").value;
var num2 = document.getElementById("number2").value;
var operator = document.getElementById("select");
var resolutor = document.getElementById("resolute");
var res = document.getElementById("result");
    
       let
           value = operator.value,
           result;
           
           switch (value) {
            case "plus":
        res.value = parseInt(num1) parseInt(num2);
                break;
            
           }

    }


    </script>
</body>
</html>

CodePudding user response：

You have to get value of input element inside of your click event handler because you need those values at the moment you click it

function mathoperation() {
  let num1 = document.getElementById("number1").value,
  num2 = document.getElementById("number2").value,
  operator = document.getElementById("select"),
  resolutor = document.getElementById("resolute"),
  res = document.getElementById("result");

  let operatorValue = operator.value;

  switch (operatorValue) {
    case "plus":
        let result = Number(num1)   Number(num2);
        res.value = result;
        console.log(num1); //console says unindefied
        console.log(num2); //console says unindefied
        break;
    }
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Úloha 18.1</title>
</head>
<body>

    <input type="text" id="number1">
    <select name="" id="select">
        <option value="plus"> </option>
        <option value="minus">-</option>
        <option value="krat">*</option>
        <option value="deleno">/</option>
    </select>
    <input type="text" id="number2">
    <input type="button" id="resolute" value="=" onclick="mathoperation()">
    <input type="text" id="result" readonly>
</body>
</html>