有人可以帮我解决这个问题，因为我是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("");
});
});
答案 0 :(得分：1)
您不能在此处使用append，因为这用于
将参数指定的内容插入每个元素的末尾 在匹配元素集合中。
因为您似乎想要显示您的＆＃34;数字＆＃34;在输入中。使用输入的值。
您的代码可能如下所示：
[...]
var value = $(this).val() + $("#display").val();
$("#display").val(value);
[...]
答案 1 :(得分：0)
对于输入标记，根据MDN，默认类型为text：
型
要显示的控件类型。如果未指定此属性，则默认类型为text。
要获取输入类型文本的值，您需要使用jQuery.val()。
eval（）函数评估表示为字符串的JavaScript代码。
例如，如果您在显示字段中写入字符串警告（＆＃39;确定＆＃39;），结果将是执行警报功能。这可能会导致您出现明显错误（用户可能出于恶意目的）。最好的方法是避免使用eval函数或测试字符串的内容（只允许数字和数学运算符）。你可以这样做，例如，使用一个简单的正则表达式模式：
if (!/^[0-9+\-*/ ]*$/.test(calc)) {
alert('input error');
}
但是，再次，仅添加此测试可以防止恶意结果，但不会向您保证正确的结果，如：
8 ++ 2
为了避免这最后一点，您可以使用try...catch。
更新的fiddle和摘录：
$(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>