输出给用户的价值

时间:2017-11-11 16:46:42

标签: javascript html

我试图弄清楚如何将num1 num2和func的值输出到屏幕供用户查看。这是一个试图充分发挥作用的计算器应用程序。该应用程序已经工作,但我似乎无法得到数字和设置为变量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>
&#13;
{{1}}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:1)

您只需使用Body而不是$("#res").val(num1);进行展示,我会建议使用id并使用类似

来绑定所有点击次数

class
$(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)
  });



});

答案 1 :(得分:0)

您只需在页面span

中添加<span id="result"></span>即可

然后,您可以使用$('#result').html(complete);

显示结果

另外,同样地,您可以在用户数字时显示数字。