带输入框的计算器结果值无法更新问题求助

嘿，我瞅了你的代码，发现两个关键问题导致结果框无法更新，咱们逐个来解决：

问题1：Script标签写法错误 #

你把jQuery的引入代码和自己的JavaScript逻辑放在了同一个<script>标签里——带src属性的script标签会忽略内部的代码，这就导致你的点击事件绑定、计算函数根本没被执行！

解决方法是把它们拆成两个独立的script标签：

<!-- 先引入jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- 再写自己的JS代码 -->
<script>
$(document).ready(function(){
$("#b1").click(function(){ Add(); });
$("#b2").click(function(){ Substract(); });
$("#b3").click(function(){ Multiply(); });
$("#b4").click(function(){ Divide(); });
});
// 下面是你的计算函数...
</script>

问题2：变量引用错误 #

你在多个计算函数里把result变量当成字符串传递了，而不是引用变量本身：

• Add()函数里的$("#ergebnis").attr("value","result")：这里的"result"是字符串字面量，不是你计算出来的变量，而且jQuery里更推荐用.val()方法来设置表单元素的值，改成$("#ergebnis").val(result)
• Multiply()和Divide()函数里的$("#ergebnis").val("result")也是同样的问题，要去掉引号，直接传变量result

修正后的完整代码 #

<html>
<head>
<meta charset="utf-8" />
<title>Praktikum Webanwendungen</title>
<style>
input, button { margin: 10px; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#b1").click(function(){ Add(); });
$("#b2").click(function(){ Substract(); });
$("#b3").click(function(){ Multiply(); });
$("#b4").click(function(){ Divide(); });
});
function Add(){
var no1=parseInt($("#number1").val());
var no2=parseInt($("#number2").val());
var result =no1+no2;
$("#ergebnis").val(result)
}
function Substract(){
var no1=parseInt($("#number1").val());
var no2=parseInt($("#number2").val());
var result =no1-no2;
$("#ergebnis").val(result)
}
function Multiply(){
var no1=parseInt($("#number1").val());
var no2=parseInt($("#number2").val());
var result =no1*no2;
$("#ergebnis").val(result)
}
function Divide(){
var no1=parseInt($("#number1").val());
var no2=parseInt($("#number2").val());
var result =no1/no2;
$("#ergebnis").val(result)
}
</script>
</head>
<body>
<h1>Taschenrechner</h1>
<label for="num1">Zahl1: </label>
<input id="number1" name="num1" type="number" />
<label for="num2">Zahl2: </label>
<input id="number2" name="num2" type="number" />
<div>
<button id="b1">+</button>
<button id="b2">-</button>
<button id="b3">x</button>
<button id="b4">/</button>
</div>
<label for="res">Ergebnis: </label>
<input id="ergebnis" name="res" type="number" value = "" >
</body>
</html>

现在你运行这个代码，点击按钮就能正常更新结果框啦！

内容的提问来源于stack exchange，提问作者Bunta