使用 Javascript 比较 HTML 中的两个输入数字？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15914514/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using Javascript to compare two input numbers in HTML?
提问by user2025508
I am using Notepad++ to create a simple web page where a user types in two numbers into a text box, and then presses a button. When they press the button something comes up that tells them whether the first or second number is greater. I have the following code but cant get anything to come up. Does anyone know whats wrong?
我正在使用 Notepad++ 创建一个简单的网页，用户在其中输入两个数字到一个文本框中，然后按下一个按钮。当他们按下按钮时，会出现一些信息，告诉他们第一个或第二个数字是否更大。我有以下代码，但无法提供任何内容。有谁知道出了什么问题？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Assignment 10 Form</title>
<script type="text/javascript">
function greaterNum(){
var value1;
var value2;
value1 = document.First_num.value;
value2 = document.last_num.value;
if (value1 > value2){
alert('Value 1 is greater than value 2');
document.body.style.background = "orange";
}
}
</script>
<style type="text/css">
body{background-color: #40FF00;
margin-left: auto;
margin-right: auto;
width: 60%;
}
#container{
border: 2px solid yellow;
padding: 20px;
}
</style>
</head>
<body>
<h1>Assignment 10</h1>
<div id="container">
<div class="Num">
<form>
<label class="label1">Enter Value 1:</label>
<input type="text" name="First_num" value=" " />
<label class="label1">Enter Value 2:</label>
<input type="text" name="last_num" value=" " />
<br/>
<input type="button" value=" Which number is greater? " onclick="greaterNum();" />
</form>
</body>
</html>
回答by elclanrs
Values from inputs are retrieved as strings, you need to convert it to number. Try this:
来自输入的值作为字符串检索，您需要将其转换为数字。试试这个：
value1 = +document.First_num.value;
value2 = +document.last_num.value;
Also, try to be consistent when naming your input, why caps for one and lowercase for the other?
另外，在命名输入时尽量保持一致，为什么一个大写而另一个小写？
回答by ameed
You may need to use:
您可能需要使用：
value1 = document.getElementById("First_num").value;
However, this onlyworks if you assign the elements idattributes:
但是，这仅在您分配元素id属性时才有效：
<input type="text" id="First_num" name="First_num" value=" " />
Otherwise,use the getElementsByName.
否则，请使用getElementsByName.
Hope this helps!!
希望这可以帮助！！
回答by KingKongFrog
Convert to floats.
转换为浮点数。
value1 = parseFloat(document.First_num.value);
value2 = parseFloat(document.last_num.value);
回答by dewyze
Html is a string, not a value. You need to parse it in someway.
Html 是一个字符串，而不是一个值。你需要以某种方式解析它。
EDIT:
编辑：
The problem seems to be grabbing the values, change it to getElementById and it works fine:
问题似乎是获取值，将其更改为 getElementById 并且它工作正常：
HTML
HTML
<h1>Assignment 10</h1>
<div id="container">
<div class="Num">
<form>
<label class="label1">Enter Value 1:</label>
<input type="text" id="First_num" name="First_num" />
<label class="label1">Enter Value 2:</label>
<input type="text" id="last_num" name="last_num" />
<br/>
<input type="button" id="clickme" value="Which number is greater?" onclick="greaterNum()" />
</form>
js
js
function greaterNum(){
var value1;
var value2;
value1 = document.getElementById("First_num").value;
value2 = document.getElementById("last_num").value;
if (value1 > value2){
alert(value1 - value2);
document.body.style.background = "orange";
}
}
