>我正在尝试在结果文本框中添加两个整数。我正在尝试添加它们并在结果框"5 + 5 = 10"中显示公式公式，例如"(num1 + num2 = value("。然而，我仍然无法弄清楚如何添加整数。
请忽略代码的其余部分，一旦我得到添加，希望我能够完成其余的工作。
<!DOCTYPE html>
<html>
<head>
<title>Math Tutor</title>
<script src="mht.js"></script>
</head>
<body>
<h1>Math Tutor</h1>
<lable>Enter a number</lable>
<input type="text" id="n1"><br>
<lable>Enter next number</lable>
<input type="text" id="n2"><br>
<input type="button" value="+" id="addNum" onclick="Addition">
<input type="button" value="-" id="subNum" onclick="subtrack">
<input type="button" value="/" id="divNum" onclick="divide">
<input type="button" value="*" id="multiNum" onclick="multiply"><br>
<input type="text" name="result" id="res" ><br><br>
<lable>Slope Calculation</lable><br>
</body>
</html>
var $ = function(id){
return document.getElementById(id);
};
var add = function(){
var num1 = parseInt($("n1").value);
var num2 = parseInt($("n2").value);
var sum = num1 + num2;
document.getElementByI("result") = (n1 "+" n2 "=" sum );
};
window.onload = function() {
$("Addition").onclick = add;
};
``
我不建议使用$，因为它通常用于jQuery。请不要将 HTML 名称属性用作 JS ID。我将数字输入字段更改为type="number"这样就不会有人在其中编写文本的问题。
function get(id){
return document.getElementById(id);
};
function add() {
var num1 = parseFloat(get("n1").value);
var num2 = parseFloat(get("n2").value);
var sum = num1 + num2;
get("res").value = (num1 + "+" + num2 + "=" + sum );
};<!DOCTYPE html>
<html>
<head>
<title>Math Tutor</title>
<script src="mht.js"></script>
</head>
<body>
<h1>Math Tutor</h1>
<lable>Enter a number</lable>
<input type="number" id="n1"><br>
<lable>Enter next number</lable>
<input type="number" id="n2"><br>
<input type="button" value="+" id="addNum" onclick="add()">
<input type="button" value="-" id="subNum" onclick="subtract()">
<input type="button" value="/" id="divNum" onclick="divide()">
<input type="button" value="*" id="multiNum" onclick="multiply()"><br>
<input type="text" name="result" id="res" ><br><br>
<lable>Slope Calculation</lable><br>
</body>
</html>不需要为每个操作提供单独的函数 - 只需为所有按钮分配一个事件处理程序，并使用其他逻辑(在本例中为按钮的值(来确定要执行的操作。使用parseFloat而不是parseInt来处理用户输入允许(不出所料(浮点数而不是整数。 虽然使用input元素来显示结果不是问题，但它看起来确实不寻常 - 特别是考虑到有一个专门用于此类情况的 HTML 元素 - 即output元素。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Math Tutor</title>
<style>
html, html *{ box-sizing:border-box; }
body{ margin:0; padding:0; display:flex; flex-direction:column; align-items:center; align-content:center; justify-content:center; width:100%;height:100vh;font-family:calibri,verdana,arial; }
form{ display:flex; justify-content:center; border:1px solid black; width:80%; height:50%; margin:auto; }
h1{ writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.5rem; letter-spacing: 0.15rem; margin:auto; background:black; color:white; height:100%; padding:0.5rem; text-align:center; }
label{ display:flex; flex:1; align-items:center; flex-direction:row; width:100%; padding:0.5rem; margin:auto; }
label:before{content:attr(data-label);text-transform:capitalize}
input{ padding:0.5rem;margin:auto }
div{ display:flex; flex-direction:row; flex:1; padding:1rem; margin:auto; }
div > input{ flex:1;margin:0 0.25rem }
output{ width:60%; height:3rem; margin:auto; text-align:center; font-size:2rem; }
</style>
<script>
/* utility to emulate PHP's `sprintf` function for formatting a string */
String.prototype.sprintf = function() {
return [ ...arguments ].reduce( ( p,c ) => p.replace(/%s/,c), this );
};
document.addEventListener('DOMContentLoaded',()=>{
/* get references to the form elements */
let form=document.forms.mathtutor;
let number_1=form.querySelector('input[type="number"][name="number-1"]');
let number_2=form.querySelector('input[type="number"][name="number-2"]');
let output=document.querySelector('output');
/* obtain reference to the function buttons and assign event handler */
Array.prototype.slice.call( form.querySelectorAll('div > [type="button"]') ).forEach( bttn=>{
bttn.addEventListener('click',function(e){
let product;
/* ensure that the values from the input elements are numbers */
let i1=parseFloat( number_1.value );
let i2=parseFloat( number_2.value );
/* perform whatever calculation is required according to button pressed */
switch( this.value ){
case '+': product=i1 + i2; break;
case '-': product=i1 - i2; break;
case '/': product=i1 / i2; break;
case 'x': product=i1 * i2; break;
}
/* format the output and display the result */
output.innerText='%s %s %s = %s'.sprintf( i1, this.value, i2, product );
});
})
});
</script>
</head>
<body>
<form name='mathtutor' method='post'>
<h1>Mathematics tutor</h1>
<label for='number-1' data-label='number 1'><input type='number' name='number-1' required /></label>
<label for='number-2' data-label='number 2'><input type='number' name='number-2' required /></label>
<div>
<input type='button' value='+' />
<input type='button' value='-' />
<input type='button' value='/' />
<input type='button' value='x' />
</div>
</form>
<output></output>
</body>
</html>