创建一个简单的计算器函数

我正在尝试创建一个简单的计算器函数，但我没有得到显示的值。我知道我错过了一些东西，但不确定它到底是什么。现在，我只研究加法，并将研究其他(乘法、减法和除法(。我的HTML代码是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
<title> Simple Calculator </title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js"></script>
<script src="js/assignment03.js"></script>

</head>
<body>
<h1>Calculator</h1>
<label for="num1">Number1</label>
<br>
<input id="num1" name="num1" type="text" value="0"/>
<br>
<label for="num2">Number 2</label>
<br>
<input id="num2" name="num2" type="text" value="0"/>
<br>
<br>
<a id="action" href="#">Click Here to Calculate </a>

<div>The result of adding the numbers is: <span id="result-add"></span></div>

</body>
</html>

我的Javascript代码是这样的：

$(document).ready(function() {
$('#action').click(function() {
//DO NOT CHANGE CODE BELOW
var num1 = parseInt($('#num1').val());
var num2 = parseInt($('#num2').val());
clear();
addNumbers(num1, num2);
var result = multiplyNumbers(num1, num2);
$('#result-mult').text(result);
//DO NOT CHANGE CODE ABOVE
});
/*
Below this comment, create a function 
named addNumbers, which accepts two parameters.
The function should add the two parameters together
and write the result to the element with the id
result-add
*/
function addNumbers (num1, num2) {
var retVal = num1 + num2;
retVal = ("#result-add");
return retVal;
};

任何见解将不胜感激。

你想要设置元素的innerHTML属性。在jQuery中，你可以用text来做到这一点。

$("#result-add").text(retVal);

如果函数的唯一目的是创建在元素中设置文本的副作用，则也不需要从函数return。

尝试更改您的 js 代码，如下所示：

$(document).ready(function() {
$('#action').click(function(event) {
event.preventDefault();
//DO NOT CHANGE CODE BELOW
var num1 = parseInt($('#num1').val());
var num2 = parseInt($('#num2').val());
let result = addNumbers(num1, num2);
$('#result-add').text(result);
//DO NOT CHANGE CODE ABOVE
});
/*
Below this comment, create a function 
named addNumbers, which accepts two parameters.
The function should add the two parameters together
and write the result to the element with the id
result-add
*/
function addNumbers (num1, num2) {
var retVal = num1 + num2;
return retVal;
}
})

目前clear(( 和 multiplyNumbers(( 没有在你的代码中定义，所以它给出了一个错误，你可以从它的函数 ** $("#result-add"(.html(retVal(** 设置加法的结果。

$(document).ready(function() {
$('#action').click(function() {
//DO NOT CHANGE CODE BELOW
var num1 = parseInt($('#num1').val());
var num2 = parseInt($('#num2').val());
//clear();
addNumbers(num1, num2);
//var result = multiplyNumbers(num1, num2);
//$('#result-mult').text(result);
//DO NOT CHANGE CODE ABOVE
});
/*
Below this comment, create a function 
named addNumbers, which accepts two parameters.
The function should add the two parameters together
and write the result to the element with the id
result-add
*/
})
function addNumbers (num1, num2) {
var retVal = num1 + num2;
$("#result-add").html(retVal);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<title> Simple Calculator </title>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.js"></script>
<script src="js/assignment03.js"></script>
</head>
<body>
<h1>Calculator</h1>
<label for="num1">Number1</label>
<br>
<input id="num1" name="num1" type="text" value="0"/>
<br>
<label for="num2">Number 2</label>
<br>
<input id="num2" name="num2" type="text" value="0"/>
<br>
<br>
<a id="action" href="#">Click Here to Calculate </a>
<div>The result of adding the numbers is: <span id="result-add"></span></div>
</body>
</html>

相关内容

最新更新

热门标签：