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

Nic*_*nes 1 html javascript conditional-statements

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

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

var variable1 = 1; 
var variable2 = 2;
Run Code Online (Sandbox Code Playgroud)

我可以使用 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.");

}
Run Code Online (Sandbox Code Playgroud)

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

我的问题是,如果我希望网页用户输入 2 个数字以便我可以计算它们(使用上述条件语句),我该如何访问或定义作为用户输入结果的变量?到目前为止,我只能在 js 文件中自己定义变量。我将如何访问 javaScript 中的用户 html 输入以执行相同的计算?

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

感谢那些帮助我解决这个问题的人。我很欣赏你们的时间很重要,这对你们中的许多人来说是一个非常基本的问题。

Pop*_*les 5

查看此工作示例

HTML

<input type="text" id="inputfield1" />
<input type="text" id="inputfield2" />
<button onclick="compare()">Compare</button>
Run Code Online (Sandbox Code Playgroud)

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.");
    }    
};
Run Code Online (Sandbox Code Playgroud)

请记住,文本输入作为字符串返回。我曾经parseInt()在这个例子中转换为整数。