自定义函数不从输入中读取值[重复]答案

【问题标题】：Custom function does not read values from input [duplicate]自定义函数不从输入中读取值[重复]
【发布时间】：2022-01-23 19:30:57
【问题描述】：

我正在尝试创建一个类似计算器的东西。我有一个自定义函数，假设从两个变量加载输入值并将它们放在一起但它不起作用，所以我检查了控制台日志是否加载了输入值，它所说的只是这些值是未定义的。知道如何解决这个问题吗？

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>

【问题讨论】：

您可以使用 SO code snippet 制作一个工作示例，让人们轻松理解您的问题。这次我已经给你了。下次你可以试试。

标签： javascript function

【解决方案1】：

您必须在单击事件处理程序中获取输入元素的值，因为您在单击它时需要这些值

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>

【讨论】：

【解决方案2】：

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

在函数内移动你的分配可以解决这个问题。

这应该让你开始-

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

【讨论】：