OnClick求解方程
我试图创建一个简单的html页面，它有三个输入变量（A，B，C）。一旦用户提供了这些值，他们将按＆＃34;计算＆＃34;，JavaScript将通过以下等式运行值
--with-openssl和
((A + B)/2) * 3 = X
答案将显示为(C * 2) = Y
值和X值的输出。
这是一张图片：
我写过HTML，但我在使用JavaScript方面遇到了困难。请有人帮忙:)非常感谢你提前！
＆＃13;
＆＃13;
＆＃13;
＆＃13;
Y
＆＃13;
＆＃13;
＆＃13;
＆＃13;
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<body class="container">
<div class="row">
<div class="span6">
<h1 align="center">Example</h1>
<form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">
<div class="control-group">
<label class="control-label">A</label>
<div class="controls">
<input type="text" name="A" class="ratecalcfield"></input>
</div>
</div>
<div class="control-group">
<label class="control-label">B</label>
<div class="controls">
<input type="text" name="B" class="ratecalcfield"></input>
</div>
</div>
<div class="control-group">
<label class="control-label">C</label>
<div class="controls">
<input type="text" name="C" class="ratecalcfield"></input>
</div>
</div>
<div class="control-group">
<label class="control-label">X Value</label>
<div class="controls">
<input type="text" name="x" class="ratecalcfield"></input>
</div>
</div>
<div class="control-group">
<label class="control-label">Y Value</label>
<div class="controls">
<input type="text" name="y" class="ratecalcfield"></input>
</div>
</div>
<div class="control-group w3-margin-top">
<div class="controls">
<input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc"></input>
</div>
</div>
</form>
<script src="js/index.js"></script>
</body>
</html>
5 个答案:
答案 0 :(得分：0)
见这里。
我在每个输入中添加了一个唯一的id。之后我通过document.getElementById获得了JavaScript中的元素。每个元素都有一个value属性，用于保存value的{{1}}。在input element事件中，我获得click，A和B的值并计算它们。计算后，我将值设置为C和X。
Yvar a = document.getElementById('A');
var b = document.getElementById('B');
var c = document.getElementById('C');
var x = document.getElementById('X');
var y = document.getElementById('Y');
function cmdCalc_Click(){
x.value = ((Number.parseInt(a.value) + Number.parseInt(b.value)) / 2) * 3
y.value = c.value * 2;
}
答案 1 :(得分：0)
更正了所有html错误。
强制输入为数字（避免在js中使用不必要的parseInt）。
设置要使用的类。
进行计算。
设置新的x和y值。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="span6">
<form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">
<div class="control-group">
<label class="control-label">A</label>
<div class="controls">
<input type="number" id="A" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">B</label>
<div class="controls">
<input type="number" id="B" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">C</label>
<div class="controls">
<input type="number" id="C" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">X Value</label>
<div class="controls">
<input type="number" id="x" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">Y Value</label>
<div class="controls">
<input type="number" id="y" class="ratecalcfield">
</div>
</div>
<div class="control-group w3-margin-top">
<div class="controls">
<input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc">
</div>
</form>
</div>
</div>
</div>
</body>
<script>
function cmdCalc_Click() {
let x = document.getElementById("x");
let y = document.getElementById("y");
const Preset = new whatToDo(x, y);
const result = Preset.calculate();
x.value = result.x;
y.value = result.y;
}
class whatToDo {
constructor(x, y) {
this.A = (document.getElementById("A").value);
this.B = (document.getElementById("B").value);
this.C = (document.getElementById("C").value);
}
calculate() {
return {
x: (3 * this.C),
y: (((this.A + this.B) / 2) * 2)
}
}
}
</script>
</body>
</html>
答案 2 :(得分：0)
没有必要使用＆＃34; id＆＃34;在变量字段中，只需使用getElementsByName（＆＃39; inputNameHere＆＃39;）[0] .value）通过字段名称获取它们
function cmdCalc_Click(){
var a = Number.parseInt(document.getElementsByName('A')[0].value);
var b = Number.parseInt(document.getElementsByName('B')[0].value);
var c = Number.parseInt(document.getElementsByName('C')[0].value);
var x = Number.parseInt(document.getElementsByName('X')[0].value);
var y = Number.parseInt(document.getElementsByName('Y')[0].value);
e1 = ((a + b)/2) * 3
if(e1 == x && x != 0){
alert("Correct " + e1 + " is equal to " + x);
}
e2 = (c * 2)
if(e2 == y && y != 0){
alert("Correct" + e2 + " is equal to " + y);
}
}
答案 3 :(得分：0)
您可以使用JavaScript eval函数计算任何表达式。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
function cmdCalc_Click() {
var a = document.querySelector('[name=A]').value;
var b = document.querySelector('[name=B]').value;
var c = document.querySelector('[name=C]').value;
var x = document.querySelector('[name=x]');
var y = document.querySelector('[name=y]');
x.value = eval("((" + a + " + " + b + ")/2) * 3");
y.value = eval("(" + c + " * 2)");
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>
<body class="container">
<div class="row">
<div class="span6">
<h1 align="center">Example</h1>
<form class="form-horizontal well w3-center" style="max-width: 850px; width: 100%; margin: 0 auto;">
<div class="control-group">
<label class="control-label">A</label>
<div class="controls">
<input type="text" name="A" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">B</label>
<div class="controls">
<input type="text" name="B" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">C</label>
<div class="controls">
<input type="text" name="C" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">X Value</label>
<div class="controls">
<input type="text" name="x" class="ratecalcfield">
</div>
</div>
<div class="control-group">
<label class="control-label">Y Value</label>
<div class="controls">
<input type="text" name="y" class="ratecalcfield">
</div>
</div>
<div class="control-group w3-margin-top">
<div class="controls">
<input type="button" class="w3-button w3-blue w3-padding-large" style="max-width: 200px; width: 100%;" onclick="cmdCalc_Click()" value="Calculate" name="cmdCalc">
</div>
</div>
</form>
</div>
</div>
</body>
</html>
答案 4 :(得分：0)
您的代码的问题在于您没有将A，B，C，X和Y ID添加到每个表单字段，并且您使用innerHTML来设置X和Y的表单值。 X＆amp; Y是文本字段，您应将值设置为
X.value=(3*C);
Y.value=((A+B)/2);
Set the ids that you are referencing in javascript to the appropraite text fields like:
<input type="text" id="A" name="A" class="">
等
现在是document.getElementById（“A”）;可以找到id为A的字段并获取其值。
Another problem:
使用值设置文本字段的值而不是innerHTML
还可以使用以下代码修改您的onclick事件，这样您就不会提交for和页面。
onclick="cmdCal_Click(); return false"
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？