我正在尝试制作一个简单的计算器：
输入1 选择输入 2 = 输入 3
- 输入
- 1，输入 2 是第一个和第二个值
- 选择有 4 个运算符：+ - */
- 输入3 显示结果
这是我的代码，它没有按预期工作，有人可以帮助我吗？
<?php
ini_set('display_errors', 0);
session_start();
/* Check if form is submit
* if any input field is empty --> "NaN" result
* else check value of select field --> do the math --> result
* Then call JS function to change value of result field
*/
if(isset($_GET['act']) && $_GET['act']== 'do') {
$val1 = $_GET['val1'];
$val2 = $_GET['val2'];
$oper = $_GET['oper'];
if($val1 == NULL || $val2 == NULL)
$result= "NaN";
else {
switch($oper) {
case 1 : $result= $val1 + $val2; break;
case 2 : $result= $va1l - $val2; break;
case 3 : $result= $val1 * $val2; break;
case 4 : $result= $val1 / $val2; break;
}
}
echo "<script> showResult('".$result."') </script>";
}
?>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style>
input,select { height:30px;width:50px}
</style>
</head>
<body>
<form method="GET" action="bai4_1.php?act=do">
<table>
<tr><td>Op1</td>
<td>Oper</td>
<td>Op2</td>
<td>Result</td></tr>
<tr><td><input id="val1" type="text" name="val1" value="<?php echo
$_GET['val1'];?>"/></td>
<td><select id="oper" name="oper">
<option value=1>+</option>
<option value=2>-</option>
<option value=3>*</option>
<option value=4>/</option>
</select></td>
<td><input id="val2" type="text" name="val2" value="<?php
echo$_GET['val2'];?>"/> =</td>
<td><input id="result" type="text"></td></tr>
</table>
</form>
</body>
</html>
<script>
$("input,select").change(function(){
setTimeout(function(){
$("form").submit();
},1000);
});
function showResult(result) {
$("#result").val(result);
}
</script>
首先要知道要为应用程序使用什么语言。
我看到你使用PHP，HTML，JavaScript和jQuery。
但是，如果您重新考虑您的小应用程序，您会(可能(注意到您可以在客户端执行所有操作。所以你可以把你的PHP拖走。
所以现在我们需要HTML来显示表单。
<form>
<table>
<tr>
<td>Op1</td>
<td>Oper</td>
<td>Op2</td>
<td>Result</td>
</tr>
<tr>
<td>
<input id="val1" type="text" name="val1" value="" />
</td>
<td>
<select id="oper" name="oper">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
<td>
<input id="val2" type="text" name="val2" value="" />
</td>
<td>
<input id="result" type="text" />
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>
<input type="submit" />
</td>
</tr>
</table>
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
在您的HTML中，我编辑了一些内容：
- 我添加了一个
input type="submit"，我们不能假设用户能够在没有的情况下发送表单。 - 我也更改了您的选择框的值
现在表单已准备就绪。
只要对jQuery有一点了解，我们就可以很容易地捕获提交事件。
$('form').submit(onFormSubmit)
function onFormSubmit() {
var val1 = $('#val1').val()
var val2 = $('#val2').val()
var operator = $('#oper').val()
$('#result').val(eval(val1 + operator + val2))
return false
}
上面解释过，我在 from 上有一个事件侦听器。
提交后，我得到了 3 个值。
我使用 eval 使用字符串作为代码，这样我就可以做eval(val1 + operator + val2)
我希望这对你有帮助。
在此处包含一个 jsFiddle 示例。
加载页面时可能会收到 JavaScript 错误。目前，页面的源代码输出可能如下所示：
<script> showResult('".$result."') </script>
<html>
...
</html>
<script>
...
function showResult(result) {
$("#result").val(result);
}
</script>
这里有两个问题：
除了<html>标签之外，您不应该拥有任何东西，即使是<script>。
您可以将这些内容移动到<head>标签中，使其外观和工作效果更好。将内容放在<html>标签之外被认为是不好的做法。
在定义 JavaScript 函数之前，您正在调用它。
第一行 JavaScript 尝试执行您的ShowResult函数。但是，这还没有定义(它在页面底部定义，JavaScript 还没有阅读它(，所以它不知道该怎么做。这会导致错误。如果您使用的是谷歌浏览器或火狐，那么您可以通过点击 Control-Shift-J 来查看此错误消息。
修复
首先，将所有 JavaScript 代码移动到页面的<head>。
其次，先编写函数。这将在页面加载时定义它们，因此一旦您开始执行函数，一切都可用。
第三，当你使用 jQuery 时，将你的函数执行代码(即：showResult('".$result."')(包装在这段代码中：
$(document).ready(function() {
// put your code here
});
这将指示您的代码在开始执行任何 JavaScript 之前等待整个页面加载。
结果应如下所示：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
// define your functions up here
function showResult(result) {
$("#result").val(result);
}
// define your Procedural code here. This stuff will execute once the page loads completely:
$(document).ready(function() {
$("input,select").change(function(){
setTimeout(function(){
$("form").submit();
},1000);
});
<?php if($result != "NaN") {
// Show this code only if $result is defined and valid:
echo "showResult('".$result."');";
?>
});
</script>