Textpattern CMS

#1 2016-09-13 11:10:35

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Javascript: volume calculator from width, length and depth

hi!

I need to create a calculator from these inputs: width, length and height, and display the answer in m³. The length and width measurs are in meters, the height (this is a tricky part) in centemeters.

Took the base of a code from one of a stackoverflow user and modified a bit (look into jsfiddle ). Basically it does what i need – calculates the sum from three values (first two are in meters, third in centemeters), but i would like it to be more simpler. I don’t need “select options” in a height field – it must have been converted automatically into meters before final result!

One more quite similar calculator for ideas

i didn’t get help in stackoverflow, so, you are my last hope. :(

#2 2016-09-16 10:05:25

Gallex

Member

Registered: 2006-10-08

Posts: 1,308

Re: Javascript: volume calculator from width, length and depth

solution:

html:

 <table>
            <tbody>
                <tr>
                    <td>Width (m)</td>
                    <td><input type="text" id="width" /></td>
                </tr>
                <tr>
                    <td>Length (m)</td>
                    <td><input type="text" id="length" /></td>
                </tr>
                <tr>
                    <td>Thickness (cm)</td>
                    <td><input type="text" id="thickness" /></td>

                </tr>
                <tr>
                    <td>Total (m<sup>3</sup>)</td>
                    <td id="answer"></td>
                </tr>
            </tbody>
        </table>

javascript:

$("#width ,#length ,#thickness").on('change keyup keydown', function () {

                var width = $("#width").val();
                var length = $("#length").val();
                var thickness = $("#thickness").val();
                var result = width * length * thickness;
                 result = result/100;
                $("#answer").text(result).append(" m<sup>3</sup>");;

            });

Last edited by Gallex (2016-09-17 07:43:12)