[英]How to get an input value dynamically and perform arithmetic operations using javascript
I have created two input text fields by which the user have to give two values. 我创建了两个输入文本字段,用户必须通过它们输入两个值。 Using javascript, I need to get those values perform addition, subtraction, multiplication and division based on the checkbox checked.
使用javascript,我需要获取基于选中的复选框执行加,减,乘和除的那些值。 How to do that?
怎么做?
Here is my code.. 这是我的代码。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS Assignment</title>
<script>
function changeCheckBox() {
try {
var max = document.myform.check.length;
var count = 0;
for (var i = 0; i < max; i++) {
if (document.myform.check[i].checked == true) {
count++;
serNoChecked = i;
}
}
if (count == 1) {
for (var i = 0; i < max; i++) {
if (document.myform.check[i].checked == false) {
document.myform.check[i].disabled = true;
}
}
} else if (count == 0) {
for (var i = 0; i < max; i++) {
document.myform.check[i].disabled = false;
}
}
if (null == max) return false;
if (count == 0) {
return true;
} else if (count > 0) {
return false;
}
} catch (e) {
alert(e.message);
}
}
</script>
<script type="text/javascript">
function arith()
{
var number1 = document.getElementById('num1').value;
var number2 = document.getElementById('num2').value;
x=num1 + num2;
var demoP=document.getElementById("demo")
demoP.innerHTML="x=" + x;
}
</script>
</head>
<body background="photo.jpg" onload="arith()">
<h3>Simple JavaScript Arithmetic Operations</h3>
<form name="myform" method="get">
Value 1 <input type ="text" id="num1"> <br><br>
Value 2 <input type="text" id="num2"> <br><br>
<input type="checkbox" name="check" value="check1" id="check1" onclick="changeCheckBox()">Addition<br>
<input type="checkbox" name="check" value="check2" id="check2" onclick="changeCheckBox()">Subtraction<br>
<input type="checkbox" name="check" value="check3" id="check3" onclick="changeCheckBox()">Multiplication<br>
<input type="checkbox" name="check" value="check4" id="check4" onclick="changeCheckBox()">Division<br><br>
<input type="submit" value="Submit">
</form>
<p id="demo"></p>
</body>
</html>
Try sending the value of the HTML into the function, and then use those as an if statement check (or switch statement). 尝试将HTML的值发送到函数中,然后将其用作if语句检查(或switch语句)。
<form name="myform" method="get">
Value 1 <input type ="text" id="num1"> <br><br>
Value 2 <input type="text" id="num2"> <br><br>
<input type="checkbox" name="check" id="check1">Addition<br>
<input type="checkbox" name="check" id="check2">Subtraction<br>
<input type="checkbox" name="check" id="check3">Multiplication <br>
<input type="checkbox" name="check" id="check4">Division<br><br>
<input type="submit" value="Submit">
<p id="demo"></p>
Notice the value
attributes now have unique value. 请注意,
value
属性现在具有唯一值。 And you're sending that into the function as a parameter. 然后将其作为参数发送到函数中。
Now just have a function that returns what you want 现在只有一个可以返回您想要的功能
var newVal = "Unset";
var plus = document.getElementById("check1");
var minus = document.getElementById("check2");
var times = document.getElementById("check3");
var divide = document.getElementById("check4");
var demoP=document.getElementById("demo");
plus.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1+n2;
demoP.innerHTML="x=" + newVal;
}
minus.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1-n2;
demoP.innerHTML="x=" + newVal;
}
times.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1*n2;
demoP.innerHTML="x=" + newVal;
}
divide.onclick = function() {
var n1 = parseFloat(document.getElementById('num1').value);
var n2 = parseFloat(document.getElementById('num2').value);
newVal = n1/n2;
demoP.innerHTML="x=" + newVal;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.