Question

我有这两个文字输入：

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

以下是：

<h1>Summ: xxxxxx</h1>

我想用以下数学代替xxxxx：

(width * height) / 2

每当我在宽度或高度输入处键入新值时，Summ应该实时更改。

这有可能吗？谢谢。

Answer 1

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

在我的情况下（因为我对此更熟悉），更容易使用这样的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：我将输入字段更改为数字类型，因此用户不会输入非数字数据。

Answer 2

问题的主要部分是：

如何获取输入框的值？
如果输入发生变化，我该如何执行代码？
如何设置元素的文本？

相关功能分别为val()，change()和text()。文档中的示例应该可以帮助您弄清楚如何将它们拼凑在一起。

Answer 3

快速修复：

<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”，并且它不是总和。

Fiddle here.

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

3 个答案: