HTML表单输入框变量在函数中进行计算并传递回表单 [英] HTML form input box variables do calculations in function and pass back to form
本文介绍了HTML表单输入框变量在函数中进行计算并传递回表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
大家好
我是html的新手，我正在尝试编写一个简单的计算器，将输入值从表单传递给函数，做一个基本的IF测试，根据IF结果进行计算，并将结果传回表格。
下面是我的代码，但它似乎不起作用，我看不清楚为什么。请协助。
< ！DOCTYPE html >
< html > ;
< head >
< body >
< 表格 > 值一：< 输入 type = text name = valueOne < span class =code-attribute> id = valueOne > < br >
值二：< 输入 type = text name = valueTwo id = valueTwo > < span class =code-keyword>< br >
值三：< 输入 type = text 名称 = valueThree id = valueThree > < br >
< 输入 类型 = 提交 value = 提交 onclick = myCalc（document.getElementById（'valueOne'）。value，document.getElementById（'valueTwo'）。value），document.getElementById（'valueThree'）。value） < span class =code-keyword>>
< / form >
< script >
function myCalc（valueOne，valueTwo，valueThree）
{
if （valueOne.value = 0 ）{
alert（ document .getElementById（' valueTwo'）。value + document .getElementById（' valueThree'）。value）;
} else if （valueTwo.value = 0 ）{
alert（ document .getElementById（' valueOne'）。value + document .getElementById（' < span class =code-string> valueThree'）。value）;
} else {
alert（ document .getElementById（' valueOne'）。value）+ document .getElementById（< span class =code-string>' valueTwo'）。value）;
}
}
< / < span class =code-leadattribute> script >
< / body >
< / html >
解决方案
我的代码更正了。请参阅下文。
< ！DOCTYPE html > ;
< html >
< head >
< body >
< 表格 > 值一：< 输入 type = text name = valueOne id = valueOne > < br >
值二：< input type = text name = valueTwo id = valueTwo > < br >
值三：< 输入 type = text 名称 = valueThree id = valueThree > < br >
< div id = result > < / div >
< 输入 type = 按钮 值 = 提交önclick = javascript：myCalc（document.getElementById（'valueOne） '）。value，document.getElementById
（'valueTwo'）。value，document.getElementById（'valueThree'）。value） >
< / form >
< script >
function myCalc（valueOne，valueTwo，valueThree）
{
if （valueOne == 0 ）{
document .getElementById（ result）。innerHTML = ' 结果：' +（ parseFloat （valueTwo）+ parseFloat （valueThree））;
} else if （valueTwo == 0 ）{
document .getElementById（ result）。innerHTML = ' 结果：' +（ parseFloat （valueOne）+ parseFloat （valueThree））;
} else {
document .getElementById（ result）。innerHTML = ' 结果：' +（ parseFloat （valueOne）+ parseFloat （valueTwo）） ;
}
}
< / < span class =code-leadattribute> script >
< / body >
< / html >
感谢您的回复Ranjan
但您的回复仅基于整数值，我需要使用dbl值。
如何更改代码？
如果输出不是警报而是表单上的输出，代码会如何变化？
Hi guys
I am new to html and I am trying to write a simple calculator that will pass input values from a form to a function, do a basic IF test, do a calculation based on IF outcome and pass back result to form.
Below is my code but it doens't seem to work and I cannot see why. Please assist.
<!DOCTYPE html>
<html>
<head>
<body>
<form>Value One: <input type="text" name="valueOne" id="valueOne"> <br>
Value Two: <input type="text" name="valueTwo" id="valueTwo"> <br>
Value Three: <input type="text" name="valueThree" id="valueThree"> <br>
<input type="submit" value="Submit" onclick="myCalc(document.getElementById('valueOne').value, document.getElementById('valueTwo').value), document.getElementById('valueThree').value)">
</form>
<script>
function myCalc(valueOne, valueTwo, valueThree)
{
if (valueOne.value = 0) {
alert(document.getElementById('valueTwo').value + document.getElementById('valueThree').value);
} else if (valueTwo.value = 0) {
alert(document.getElementById('valueOne').value + document.getElementById('valueThree').value);
} else {
alert(document.getElementById('valueOne').value)+ document.getElementById('valueTwo').value);
}
}
</script>
</body>
</html> 解决方案
Hi,
I have correct your code. Please see below.
<!DOCTYPE html> <html> <head> <body> <form>Value One: <input type="text" name="valueOne" id="valueOne"> <br> Value Two: <input type="text" name="valueTwo" id="valueTwo"> <br> Value Three: <input type="text" name="valueThree" id="valueThree"> <br> <div id="result"></div> <input type="button" value="Submit" önclick="javascript:myCalc(document.getElementById('valueOne').value, document.getElementById ('valueTwo').value, document.getElementById('valueThree').value)"> </form> <script> function myCalc(valueOne, valueTwo, valueThree) { if (valueOne == 0) { document.getElementById("result").innerHTML = 'Result: '+ (parseFloat(valueTwo) + parseFloat(valueThree)); } else if (valueTwo == 0) { document.getElementById("result").innerHTML = 'Result: '+ (parseFloat(valueOne) + parseFloat(valueThree)); } else { document.getElementById("result").innerHTML = 'Result: '+ (parseFloat(valueOne) + parseFloat(valueTwo)); } } </script> </body> </html>
Thanks for the reply Ranjan
But your reply was only based on integer values and I need to work with dbl values.
How would this change the code?
Also how would the code change if the output was not in an alert but an output on the form?
这篇关于HTML表单输入框变量在函数中进行计算并传递回表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
