eval() 方法，带有 jQuery 语法中的变量，不起作用

我正在尝试使用尽可能小的JavaScript代码位运行计算器。我正在使用jQuery来进一步最小化我的脚本部分。但是我的eval()方法不起作用alert(executed)尽管它旁边的存在工作正常！我做错了什么？看看我到目前为止尝试过什么！

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<style>
.inp {
font-weight: bolder;
font-size: 5vw;
width: 13vw;
height: 13vw;
margin-bottom: 2vw;
margin-top: 2vw;
}

input:hover {
color: red;
}
</style>
</head>
<body>
<p>
Answer will be shown here:
</p>
<br></br><br></br>
<table style="background:black; padding:2vw; width:60vw; margin-left:20vw;">
<th>
<div id="display" style="width:56vw; height:15vw; background:skyblue; font-weight:bolder; font-size:5vw; color:red;"></div>
</th>
<tr>
<td>
<input class="inp" type="button" value="1" />
<input class="inp" type="button" value="2" />
<input class="inp" type="button" value="3" />
<input class="inp" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="4" />
<input class="inp" type="button" value="5" />
<input class="inp" type="button" value="6" />
<input class="inp" type="button" value="-" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="7" />
<input class="inp" type="button" value="8" />
<input class="inp" type="button" value="9" />
<input class="inp" type="button" value="*" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="." />
<input class="inp" type="button" value="0" />
<input class="inp" type="button" value="/" />
<input class="inp" type="button" value="one_answers" />
</td>
</tr>
</table>
<script>
$(function() {
$("input.inp").on("click", function() {
if ($(this).val() != "one_answers") {
var solve = $("#display").append($(this).val());
}
if ($(this).val() == "one_answers") {
var result = eval(solve);
$("p").html(eval(result));
alert("executed");
}
});
});
</script>
</body>
</html>

编辑：此代码中存在一些语法错误，我希望现在可以修复。

您需要获取#display的值，然后将其传递给eval函数以获得所需的答案。

演示代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta charset="UTF-8" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<style>
.inp {
font-weight: bolder;
font-size: 5vw;
width: 13vw;
height: 13vw;
margin-bottom: 2vw;
margin-top: 2vw;
}

input:hover {
color: red;
}
</style>
<p>
Answer will be shown here: <span></span>
</p>
<br></br><br></br>
<table style="background:black; padding:2vw; wclassth:60vw; margin-left:20vw;">
<th>
<div id="display" style="wclassth:56vw; height:15vw; background:skyblue; font-weight:bolder; font-size:5vw; color:red;"></div>
</th>
<tr>
<td>
<input class="inp" type="button" value="1" />
<input class="inp" type="button" value="2" />
<input class="inp" type="button" value="3" />
<input class="inp" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="4" />
<input class="inp" type="button" value="5" />
<input class="inp" type="button" value="6" />
<input class="inp" type="button" value="-" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="7" />
<input class="inp" type="button" value="8" />
<input class="inp" type="button" value="9" />
<input class="inp" type="button" value="*" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="." />
<input class="inp" type="button" value="0" />
<input class="inp" type="button" value="/" />
<input class="inp" type="button" value="one_answers" />
</td>
</tr>
</table>
<script>
$(function() {
$("input.inp").on("click", function() {
if ($(this).val() != "one_answers") {
$("#display").append($(this).val());//append new value

}
if ($(this).val() == "one_answers") {
var solve = $("#display").text();//get value from display
var result = eval(solve);//eval
console.log(result)
$("span").html(result);
alert("executed");
}
});
});
</script>

parseInt()行parseInt($("#display").append($(this).val());不会返回你认为它会返回的内容，parseInt()会尝试解析.append()的结果，这不是一个数值，这就是我认为你可以实现它的方式：

还有安全说明，请尽量避免使用eval()，请检查这个：切勿使用评估

$(function () {
$("input.inp").on("click", function () {
let solv = $(this).val();
if (solv != "one_answers") {    
$("#display").append(solv);
}
if (solv == "one_answers") {
let solve = $("#display").text();
const result = calculateResult(solve);
$("#ans").html(result);
}
});
});
function calculateResult(js) {
return Function('"use strict";return (' + js + ")")();
}

.inp {
font-weight: bolder;
font-size: 5vw;
width: 13vw;
height: 13vw;
margin-bottom: 2vw;
margin-top: 2vw;
}
input:hover {
color: red;
}

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<meta charset="UTF-8" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0" />
</head>
<body>
<p>
Answer will be shown here: <span id='ans'></span>
</p>
<table style="background: black; padding: 2vw; wclassth: 60vw; margin-left: 20vw;">
<th><div id="display" style="wclassth: 56vw; height: 15vw; background: skyblue; font-weight: bolder; font-size: 5vw; color: red;"></div></th>
<tr>
<td>
<input class="inp" type="button" value="1" />
<input class="inp" type="button" value="2" />
<input class="inp" type="button" value="3" />
<input class="inp" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="4" />
<input class="inp" type="button" value="5" />
<input class="inp" type="button" value="6" />
<input class="inp" type="button" value="-" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="7" />
<input class="inp" type="button" value="8" />
<input class="inp" type="button" value="9" />
<input class="inp" type="button" value="*" />
</td>
</tr>
<tr>
<td>
<input class="inp" type="button" value="." />
<input class="inp" type="button" value="0" />
<input class="inp" type="button" value="/" />
<input class="inp" type="button" value="one_answers" />
</td>
</tr>
</table>
</body>
</html>

相关内容

最新更新

热门标签：