从输入中获取值，计算它们并显示结果

Get values from inputs, calculate them and show the result

本文关键字：显示 结果 计算 输入 获取      更新时间：2023-09-26

我有两个文本输入:

<input type="text" value="" id="width" name="width" />
<input type="text" value="" id="height" name="height" />

下面是:

<h1>Summ: xxxxxx</h1>

我想用下面的数学方法替换xxxxx: 

(width * height) / 2

每当我在宽度或高度输入一个新值时，总和应该实时改变。

这可能吗?谢谢你。

您有多种选择。有许多技术、框架、库和方法可以做到这一点。

在我的情况下(因为我更熟悉这个)，更容易的是像这样使用JQuery。

$('#width, #height').on('input', function(){
  var width = $('#width').val();
  var height = $('#height').val();
  
  if (width != "" && height != "")
      $('#result').text(width*height/2);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" value="" id="width" name="width" />
<input type="number" value="" id="height" name="height" />
<h1>Result: <span id='result'>0</span></h1>

Obs:我将您的输入字段更改为数字类型，因此用户不会输入非数字数据。

快速修复:

<input type="text" value="" id="width" name="width" />
<input type="text" value="" id="height" name="height" />
<h1 class="calc"></h1>

: 

$('#width, #height').on('input', function () {
    var widthInput = $('#width').val()
    var heightInput = $('#height').val()
    var result = widthInput * heightInput / 2
    $('.calc').text(result)
})

您可能希望为每个字段放置一个占位符值，例如1，这样它就不会从0开始计算。而且，它的拼写是"sum"而不是"summ"，而且它也不是一个和。

小提琴。

问题的主要部分是:

  • 如何获得输入框的值?
  • 当输入发生变化时，我如何执行代码?
  • 如何设置元素的文本?

相关函数分别为val()、change()和text()。文档中的示例应该可以帮助您弄清楚如何将它们组合在一起。

相关文章：