从输入中获取值，对其进行计算并显示结果

Question

I have these two text inputs:

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

And below there is:

<h1>Summ: xxxxxx</h1>

I want to replace xxxxx with the following math:

(width * height) / 2

Whenever I type a new value at width or height inputs, the Summ should change realtime.

Is this possible at all? Thank you.

Answer 1

You have multiple options to do that. There are many technologies frameworks, libraries, and ways to do it.

In my case (as I'm more familiar with this), the easier would be to use JQuery like this.

 $('#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: I changed your input fields to numeric type, so the user won't enter non-numeric data.

Answer 2

The main pieces of the problem are:

• How do I get the value of an input box?
• How do I execute code whenever input changes?
• How do I set the text of an element?

The relevant functions are val() , change() , and text() respectively. The examples in the documentation should help you figure out how to piece it all together.

Answer 3

Quick fix:

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

<h1 class="calc"></h1>

And:

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

You might wanna put a placeholder value like 1 for each field so it doesn't begin calculating with a 0. Also, it's spelled "sum" and not "summ", and it's not a sum anyway.

Fiddle here.