在单击按钮时在文本框中使用append（value）时遇到麻烦

debugcn 发表于 Dev

贾纳维

有人可以帮我解决这个问题，因为我是javascript新手。我尝试使用jquery一个简单的计算器。但是，当我尝试在单击它时将一个值附加到文本框中时，它不起作用。这是代码段。谢谢。

请在https://jsfiddle.net/jananivaish/hwLa72yu/中找到代码

<body>
    <div class="calc">
        <h1>Calculator </h1>
        <input id="display" name="display" />
        <input id="Result" name="result" />
        <table>
            <tr class="row">
                <td> <button value="7" name="7" class="number" id="seven">7</button> </td>
                <td> <button value="8" name="8" id="eight" class="number">8</button> </td>
                <td> <button value="9" name="9" id="nine" class="number">9</button> </td>
                <td> <button value="+" name="sum" id="sum" class="number">+</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="4" name="4" id="four" class="number">4</button> </td>
                <td> <button value="5" name="5" id="five" class="number">5</button> </td>
                <td> <button value="6" name="6" id="six" class="number">6</button> </td>
                <td> <button value="-" name="sub" id="sub" class="number">-</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="1" name="1" id="one" class="number">1</button> </td>
                <td> <button value="2" id="two" class="number">2</button> </td>
                <td> <button value="3" id="three" class="number">3</button> </td>
                <td> <button value="*" id="mul" class="number"> * </button> </td>
            </tr>
            <tr class="row">
                <td> <button value="0" class="number" name="0" id="zero">0</button> </td>
                <td> <button value="=" id="equal">=</button> </td>
                <td> <button value="dot" class="number" id="dot">.</button> </td>
                <td> <button value="/" id="divi" class="number">/</button> </td>
            </tr>
        </table>
        <button id="clear" class="clear">clear</button>
    </div>
</body>



$(document).ready(function() {
    $(".number").click(function() {
        var value = $(this).val();
        $("#display").append(value);
    });
    $("#equal").click(function() {
        var calc = $("#display").text();
        var answer = eval(calc);
        $("#Result").text(answer);
    });
    $(".clear").click(function() {
        $("#display").text("");
        $("#Result").text("");
    });
});

盖塔诺

对于输入标签，根据MDN，默认类型为text：

类型

要显示的控件类型。如果未指定此属性，则默认类型为text。

为了获得输入类型文本的值，您需要使用jQuery.val（）。

此外，根据MDN的功能eval：

eval（）函数评估以字符串形式表示的JavaScript代码。

仅举例来说，如果您在显示字段中写入字符串alert（'ok'），则结果将是alert函数的执行。这可能会导致您出现明显的错误（用户可能出于恶意目的）。最好的方法是完全避免使用eval函数或测试字符串的内容（仅允许数字和数学运算符）。例如，您可以使用简单的正则表达式模式执行此操作：

if (!/^[0-9+\-*/ ]*$/.test(calc)) {
   alert('input error');
}

但是，再次，仅添加此测试将防止恶意结果，但不能确保您获得正确的结果，例如：

8 ++ 2

为了避免最后一点，您可以使用try ... catch。

更新的小提琴和代码段：

$(document).ready(function(){
  $(".number").on('click', function(e) {
    var value = $(this).val();
    $("#display").val(function(idx, val) {
      return val + value;
    });
  });
  $("#equal").on('click', function(e) {
    var calc = $("#display").val();
    if (!/^[0-9+\-*/ ]*$/.test(calc)) {
      $("#Result").val('input error');
      return;
    }
    $("#Result").val(function(idx, val) {
      try {
        return eval(calc);
      } catch(err) {
        return "error"
      }
    });
  });
  $(".clear").click(function(e) {
    $("#display, #Result").val("");
  });
});

h1{color:white;
  text-align:center;
}
#Result, #display{margin-left:25px;
  font-family: Droid Sans Mono;
  background-color:#aaa;
  display: table;
  width:70%;
  height:20px;
  border-radius:5px;
  color: #333;
}
.calc {
  position:relative;
  margin:0 auto;
  width:225px;
  height:300px;
  background-color: #444;
  border-radius: 20px;
  font-family:oxygen;
}
.row{text-align:center;
  position:relative;
}
table{margin-left:50px;
  margin-top:15px;
}
.clear{margin-left:80px;
  margin-top:15px;
  width:50px;
  height:25px;
  border-radius:5px;
}
button{width:25px;
  height:25px;
  border-radius:5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<div class="calc">
    <section>
        <h1>Calculator </h1>
        <input id="display" name ="display" />
        <input id="Result" name ="result" />
        <table >
            <tr class="row">
                <td> <button value="7" name= "7" class="number" id ="seven" >7</button> </td>
                <td> <button value="8" name= "8" id="eight" class="number">8</button> </td>
                <td> <button value="9" name= "9" id="nine" class="number" >9</button> </td>
                <td> <button value="+" name= "sum" id="sum" class="number" >+</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="4" name= "4" id="four" class="number">4</button> </td>
                <td> <button value="5" name= "5" id="five" class="number">5</button> </td>
                <td> <button value="6" name= "6" id="six" class="number">6</button> </td>
                <td> <button value="-" name= "sub" id="sub" class="number">-</button> </td>
            </tr>
            <tr class="row">
                <td> <button value="1" name= "1" id="one" class="number">1</button> </td>
                <td> <button value="2" id="two" class="number">2</button> </td>
                <td> <button value="3" id="three" class="number">3</button> </td>
                <td> <button value="*" id="mul" class="number"> * </button> </td>
            </tr>
            <tr class="row">
                <td> <button value="0" class="number" name="0" id="zero">0</button> </td>
                <td> <button value="=" id="equal" >=</button> </td>
                <td> <button value="dot" class="number" id="dot">.</button> </td>
                <td> <button value="/" id="divi" class="number">/</button> </td>
            </tr>
        </table>
        <button id="clear" class="clear">clear</button>
    </section>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。