自定義函式不從輸入讀取值-有解無憂

我正在嘗試創建一個類似計算器的東西。我有一個自定義函式，假設從兩個變數加載輸入值，然后將它們放在一起，但它不起作用，所以我檢查了控制臺日志是否加載了輸入值，它只是說這些值是未定義的。知道如何解決這個問題嗎？

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>

uj5u.com熱心網友回復：

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

uj5u.com熱心網友回復：

您必須在單擊事件處理程式中獲取 input 元素的值，因為您在單擊它時需要這些值

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/390115.html

標籤：javascript 功能

上一篇：我正在創建一個函式，但此代碼出現TypeError:'int'objectdoesnotsupportitemassignment

下一篇：如何自定義“運算式”類的物件？我需要撰寫一個引數改變的函式