Question

所以我一直在学习JavaScript语言的基础知识。到现在为止还挺好。我正在练习很多比较操作，以便根据我的变量定义来理解各种计算和输出。

我可以定义2个变量并设置它们。这很简单。

var variable1 = 1; 
var variable2 = 2;

我可以使用if / else语句来比较2个变量值。

if (variable1 > variable2) {

  alert("The first variable is greater than the second.");

} else {

  alert("The second variable is greater than the first one.");

}

我理解这个简单的逻辑以及它是如何工作的。

我的问题是，如果我想要一个网页用户输入2个数字，那么我可以计算它们（使用上面的条件语句）如何访问或定义用户输入结果的变量？到目前为止，我只能在js文件中自己定义变量。如何在javaScript中访问用户html输入以执行相同的计算？

我的第一个假设是我使用getElementById属性来访问html中textarea元素的值。但我不确定这将如何将textarea值存储为变量然后进行计算。我希望这是有道理的。

感谢那些帮助我的人。我很感激你的时间很重要，这对很多人来说都是一个非常基本的问题。

Answer 1

<强> View this working example

HTML

<input type="text" id="inputfield1" />
<input type="text" id="inputfield2" />
<button onclick="compare()">Compare</button>

JS

function compare(){
    var variable1 = parseInt(document.getElementById('inputfield1').value);
    var variable2 = parseInt(document.getElementById('inputfield2').value);
    if (variable1 > variable2) {
      alert("The first variable is greater than the second.");
    } else {
      alert("The second variable is greater than or equal to the first one.");
    }    
};

请记住，文本输入会以字符串形式返回。我已经使用parseInt()转换为此示例的整数。

Answer 2

例如，您有一个HTML页面：

<html>
...
<!-- comment: make sure to include your script here as this is a common mistake -->
<body>
  <input type="text" id="text1ID" />
  <input type="text" id="text2ID" />
</body>
...
</html>

在随附的JavaScript中，您可以执行以下操作：

// getting the values:
var variable1 = document.getElementById('text1ID').value;
var variable1 = document.getElementById('text2ID').value;

// add logic to do something about the values:

if (variable1 > variable2) {

  alert("The first variable is greater than the second.");

} else {
  // fixed this according to comments
  // alert("The second variable is greater than the first one.");
  alert("The second variable is greater than OR equal the first one.");

}

Answer 3

HTML代码

<input type="text" id="ele1" name="ele1" />
<input type="text" id="ele2" name="ele1" />

对于JavaScript，您可以使用getElementById访问具有指定标识

的元素

var variable1 = document.getElementById("ele1").value;
var variable2 = document.getElementById("ele2").value;

对于jQuery

var variable1 =$("#ele1").val();
var variable2 = $("#ele2").val();

Answer 4

我会遵循nmenego的建议，但请记住，从文本字段获得的值本质上是字符串（而不是数字）。 Javascript可让您快速松散地玩这个游戏，但这会导致不太理想的结果：

考虑： http://jsfiddle.net/eFkze/

alert("10" > "9")

所以...你想要收集值，然后最简单的方法是尝试将它们乘以1.如果值是“某些非数字的东西”，那么该操作的结果将失败但是如果它是“5”或“5.5”。

Answer 5

而不是使用：

var variable1 = 1;
var variable2 = 2;

使用：

var variable1 = document.getElementById('inputfield1').value;
var variable1 = document.getElementById('inputfield2').value;

您将获得这些输入字段的值。但是您必须确保这些是您要比较的数字，因为用户可能会设置您正在计算的数值以外的任何值。所以在比较之前你必须做一些验证。

Answer 6

在Chrome上试用此功能，它完全符合HTML5标准，请尝试不编号，看看会发生什么：

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>
<script>
function compare()
{
    var variable1 = document.getElementById('firstNumber').value;
    var variable2 = document.getElementById('secondNumber').value;
    if (variable1 > variable2) {
        alert("The first variable is greater than the second.");
    } else if (variable1 < variable2)
    {
        alert("The second variable is greater than the first one.");
    }  else 
    {
        alert("They are equal");
    }
}
</script>
</head>
<body>
<form onsubmit="compare();return false;">
First Number: <input type="number" id="firstNumber" name="firstNumber" required>
Second Number: <input type="number" id="secondNumber" name="secondNumber" required>
<input type="submit" value="Submit">
</body>
</html>

Answer 7

HTML

<input id='value1' type='text' placeholder='enter value1' />
<br/>
<input id='value2' type='text' placeholder='enter value2' />
<br/>
<button id='calculate'>Calculate</button>

的JavaScript

var button = document.getElementById('calculate');
button.addEventListener('click', calculate, false);

function calculate() {
    var value1 = parseFloat(document.getElementById('value1').value);
    var value2 = parseFloat(document.getElementById('value2').value);

    if (value1 > value2) {
        alert("The first variable is greater than the second.");
    } else {
        alert("The second variable is greater than or equal to the first one.");
    }
}

此示例为您提供所需内容。它还将HTML与JS代码分开，您可以在JavaScript代码中挂钩click事件而不是HTML onclick标记。

当然，您必须处理来自用户的有效输入，因此数字字段中没有文字，但这是另一个故事。

您可以在JSFiddle

看到完整的示例

Answer 8

下面的代码将首先检查是否输入了两个输入，以及两个输入是否为数字，然后继续计算。 isNaN函数用于检查数字。

HTML CODE

<input type="text" id="inputfield1" />
<input type="text" id="inputfield2" />
<button onclick="compare()">Compare</button>

<强> JAVASCRIPT

function compare()
{
    var variable1, variable2;
    try
    {
         variable1 = parseInt(document.getElementById('inputfield1').value);
     variable2 = parseInt(document.getElementById('inputfield2').value);

     if (isNaN(variable1) || isNaN(variable2))
     {
     alert("Either or both of the inputs is not a number");
     }
     else if (variable1 > variable2) 
     {
         alert("The first variable is greater than the second.");
     } 
     else 
     {
         alert("The second variable is greater than or equal to the first one.");
     }
   }
   catch (e)
   {
        alert ('Exception Caught '+e);
   }
};

使用JavaScript收集用户输入以进行计算

8 个答案: