使用 Javascript 比较 HTML 中的两个输入数字？

IT技术 javascript html if-statement
2021-03-10 15:12:25

我正在使用 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>
4个回答

来自输入的值作为字符串检索，您需要将其转换为数字。试试这个：

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

另外，在命名输入时尽量保持一致，为什么一个大写而另一个小写？

@dewyze 仅供参考，最后的“.value”是完成技巧的关键！
2021-05-09 15:12:25

您可能需要使用：

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

但是，这仅在您分配元素id属性时才有效：

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

否则，请使用getElementsByName.

希望这可以帮助！！

转换为浮点数。

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

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

}
我们如何解析这个 HTML？
2021-05-03 15:12:25
哦，你完全正确。我真的不知道如何回答很多问题，我很兴奋。
2021-05-15 15:12:25
我不是想成为一个沮丧的人，但在未来，请至少发布一些原始代码并在可能的情况下在本地机器上测试。感谢更新！！:-)
2021-05-17 15:12:25
我想补充一点，您需要检查用户输入的值是否为数字。您可以为此使用 isNan 函数。您可以使用函数 isNaN 来完成。if (isNaN(value1) || isNan(value2)) { alert('输入数字'); }
2021-05-20 15:12:25
其它你可能感兴趣的问题
上一篇当为“var”和“let”分配一个抛出错误的函数的返回值时，是什么导致它们之间的不同行为 下一篇Javascript - 检索对象属性路径