使用Javascript比較HTML中的兩個輸入數字？

Question

我正在使用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>

Answer 1

輸入中的值以字符串形式檢索，您需要將其轉換為數字。 嘗試這個：

value1 = +document.First_num.value;
value2 = +document.last_num.value;

另外，在命名輸入時，請嘗試保持一致，為什么一個大寫而另一個小寫呢？

Answer 2

您可能需要使用：

value1 = document.getElementById("First_num").value;

但是，這僅在分配元素id屬性時有效：

<input type="text" id="First_num" name="First_num" value=" " />

否則，請使用getElementsByName 。

希望這可以幫助！！

Answer 3

轉換為浮點數。

value1 = parseFloat(document.First_num.value);
value2 = parseFloat(document.last_num.value);

Answer 4

HTML是一個字符串，而不是一個值。 您需要以某種方式解析它。

編輯：

問題似乎是在獲取值，將其更改為getElementById，並且工作正常：

http://jsfiddle.net/fHtZU/10/

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

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";
    }

}

使用Javascript比較HTML中的兩個輸入數字？

問題描述

4 個解決方案

解決方案1
5 2013-04-09 23:47:46

解決方案2
0 2013-04-09 23:50:45

解決方案3
0 2013-04-10 02:29:54

解決方案4
-1 2013-04-09 23:48:59

使用Javascript比較HTML中的兩個輸入數字？

問題描述

4 個解決方案

解決方案1 5 2013-04-09 23:47:46

解決方案2 0 2013-04-09 23:50:45

解決方案3 0 2013-04-10 02:29:54

解決方案4 -1 2013-04-09 23:48:59

解決方案1
5 2013-04-09 23:47:46

解決方案2
0 2013-04-09 23:50:45

解決方案3
0 2013-04-10 02:29:54

解決方案4
-1 2013-04-09 23:48:59