javascript - 输出值给用户

Question

我试图弄清楚如何将 num1 num2 和 func 的值输出到屏幕上供用户查看。这是一个计算器应用程序，我正在尝试使其功能齐全。该应用程序已经可以运行，但我似乎无法获取数字和设置为变量函数以向用户显示在屏幕上的操作。 如果您需要更多信息，请告诉我。

$(document).ready(function() {
  var num1 = []

  var num2 = []

  var func = null

  $('#one').click(function() {
    if (func === null) {
      num1.push('1')
      console.log(num1)
    } else {
      num2.push('1')
      console.log(num2)
    }
  });

  $('#two').click(function() {
    if (func === null) {
      num1.push('2')
      console.log(num1)
    } else {
      num2.push('2')
      console.log(num2)
    }
  });

  $('#three').click(function() {
    if (func === null) {
      num1.push('3')
    } else {
      num2.push('3')
    }
  });

  $('#four').click(function() {
    if (func === null) {
      num1.push('4')
    } else {
      num2.push('4')
    }
  });

  $('#five').click(function() {
    if (func === null) {
      num1.push('5')
    } else {
      num2.push('5')
    }
  });

  $('#six').click(function() {
    if (func === null) {
      num1.push('6')
    } else {
      num2.push('6')
    }
  });

  $('#seven').click(function() {
    if (func === null) {
      num1.push('7')
    } else {
      num2.push('7')
    }
  });

  $('#eight').click(function() {
    if (func === null) {
      num1.push('8')
    } else {
      num2.push('8')
    }
  });

  $('#nine').click(function() {
    if (func === null) {
      num1.push('9')
    } else {
      num2.push('9')
    }
  });

  $("#zero").click(function() {
    if (func === null) {
      num1.push('0')
    } else {
      num2.push('0')
    }
  });

  $('#plus').click(function() {
    func = "+"
    console.log(func)
  });

  $('#minus').click(function() {
    func = "-"
  });

  $('#divide').click(function() {
    func = "/"
  });

  $('#multiply').click(function() {
    func = "*"
    console.log(func)
  });

  $('#equals').click(function() {
    if (func === "+") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 + number2
      console.log(complete)
    } else if (func === "-") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 - number2
      console.log(complete)
    } else if (func === "*") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 * number2
      console.log(complete)
    } else if (func === "/") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 / number2
      console.log(complete)
    } else {
      console.log("error")
    }
  });

  $('#clear').click(function() {
    num1 = []
    num2 = []
    func = null
    console.log(num1)
    console.log(num2)
    console.log(func)
  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>

<div id="calculator-container">
  <form class="show">
    <input type="text" name="numbers" disabled><br>
  </form>
  <center>
    <div class="calculator-view">
      <table>
        <tr>
          <td>
            <button id="clear" type="button">AC</button>
            <button id="sign" type="button">+/-</button>
            <button id="divide" type="button">÷</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="seven" type="button">7</button>
            <button id="eight" type="button">8</button>
            <button id="nine" type="button">9</button>
            <button id="multiply" type="button">X</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="four" type="button">4</button>
            <button id="five" type="button">5</button>
            <button id="six" type="button">6</button>
            <button id="minus" type="button">-</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="one" type="button">1</button>
            <button id="two" type="button">2</button>
            <button id="three" type="button">3</button>
            <button id="plus" type="button">+</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="zero" type="button">0</button>
            <button id="equals" type="button">=</button>
          </td>
        </tr>
      </table>
    </div>

Answer 1

您可以简单地使用 $("#res").val(num1); 显示，而不是 id 我建议使用 class 并使用这样的类绑定(bind)所有点击

$(document).ready(function() {
  var num1 = []

  var num2 = []

  var func = null

  $('.num').click(function() {
    if (func === null) {
      num1.push($(this).text())
      console.log(num1)
      $("#res").val(num1.join(''));

    } else {
      num2.push($(this).text())
      console.log(num2)
      $("#res").val(num2.join(''));
    }
  });

  $('.action').click(function() {
    func = $(this).text();
    console.log(func)
    $("#res").val(func);
  });



  $('#equals').click(function() {
    if (func === "+") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 + number2
      console.log(complete)
    } else if (func === "-") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 - number2
      console.log(complete)
    } else if (func === "*") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 * number2
      console.log(complete)
    } else if (func === "/") {
      num1 = num1.join("")
      number1 = parseInt(num1)
      num2 = num2.join("")
      number2 = parseInt(num2)
      var complete = number1 / number2
      console.log(complete)
    } else {
      console.log("error")
    }
    $("#res").val(complete);
  });

  $('#clear').click(function() {
    num1 = []
    num2 = []
    func = null
    console.log(num1)
    console.log(num2)
    console.log(func)
  });



});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js">
</script>

<div id="calculator-container">
  <form class="show">
    <input type="text" id="res" name="numbers" disabled><br>
  </form>
  <center>
    <div class="calculator-view">
      <table>
        <tr>
          <td>
            <button id="clear" type="button">AC</button>
            <button id="sign" class="action" type="button">+/-</button>
            <button id="divide" class="action" type="button">÷</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="seven" class="num" type="button">7</button>
            <button id="eight" class="num" type="button">8</button>
            <button id="nine" class="num" type="button">9</button>
            <button id="multiply" class="action" type="button">X</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="four" class="num" type="button">4</button>
            <button id="five" class="num" type="button">5</button>
            <button id="six" class="num" class="num" type="button">6</button>
            <button id="minus" class="action" type="button">-</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="one" class="num" type="button">1</button>
            <button id="two" class="num" type="button">2</button>
            <button id="three" class="num" type="button">3</button>
            <button id="plus" class="action" type="button">+</button>
          </td>
        </tr>
        <tr>
          <td>
            <button id="zero" class="num"  type="button">0</button>
            <button id="equals" type="button">=</button>
          </td>
        </tr>
      </table>
    </div>