CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3666096
user3666096

Reputation: 13

script not producing result

New to javascript. Would very much like to produce a simple calculator that uses three inputs and 4 fixed values to produce and report a 'peak power output' value. Code is as follows:

<script type="text/javascript">
    "use strict";
    /*jslint browser:true */
    function calculate() {
    var vj, hgt, wgt, result, peakresult;
    vj = document.getElementById('vjump');
    hgt = document.getElementById('height');
    wgt = document.getElementById('weight');
    result = document.getElementById('peakresult');
    peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
    result.value = peakresult;
}
</script>

html:

<td>
    <input id="vj" type="text" oninput="calculate()" />
</td>
<td>
    <input id="hgt" type="text" oninput="calculate()" />
</td>
<td>
    <input id="wgt" type="text" oninput="calculate()" />
</td>

have this in a html page with table to display input and results, input works, but not results.

Upvotes: 0

Views: 106

Answers (4)

Danyu
Danyu

Reputation: 507

You might need parse text into integer

    parseInt(val);

Check this live sample
http://jsfiddle.net/VdrWL/2/

Hope it helps.

Upvotes: 0

user996758
user996758

Reputation:

if you replace

vj = document.getElementById('vjump');
hgt = document.getElementById('height');
wgt = document.getElementById('weight');

by 

vj = Number(document.getElementById('vjump').value);
hgt = Number(document.getElementById('height').value);
wgt = Number(document.getElementById('weight').value);

It should work.

BUT WITH NO check for correct input.

(EDITED)

This following code is working (Tested on Chrome)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script>
    function calculate() {
        var vj, hgt, wgt, result, peakresult;
        vj = Number(document.getElementById('vj').value);
        hgt = Number(document.getElementById('hgt').value);
        wgt = Number(document.getElementById('wgt').value);
        result = document.getElementById('peakresult');
        peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
        result.value = peakresult;
    }
    </script>
</head>
<body>
    <td>
        <input id="vj" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="hgt" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="wgt" type="text" oninput="calculate()" value="1"/>
    </td>
    <td>
        <input id="peakresult" type="text" value="0"/>
    </td>

</body>

Upvotes: 0

mts7
mts7

Reputation: 583

You have jquery tagged, so here is a jQuery version.

<script type="text/javascript">
"use strict";
/*jslint browser:true */
function calculate() {
    var vj, hgt, wgt, result, peakresult;
    vj = $('#vj').val();
    hgt = $('#hgt').val();
    wgt = $('#wgt').val();
    result = $('#peakresult');
    peakresult = (78.6 * vj) + (60.3 * hgt) - (15.3 * wgt) - 1308;
    result.val(peakresult);
}

$(document).ready(function() {
    $('input[type="text"]').on('blur', function() {
        calculate();
    });
});
</script>

This assumes you also have <input type="text" id="peakresult" /> in your HTML.

I added a jQuery event handler that will call the calculate button when the user leaves the input field. That could be more useful than having a handler in the field tag.

Upvotes: 1

sirugh
sirugh

Reputation: 334

You can use unary plus, +, to turn your values into a number and then perform operations on them:

function add() {
  var a = +document.getElementById('firstOperand').value;
  var b = +document.getElementById('secondOperand').value;
  return a + b;
}

Also your html suggests you are invoking the calculate function every keystroke by using oninput. You can use onblur to call the calculate function after the user leaves the field.

Upvotes: 0

Related Questions