Simple Area Calculator

Hi All

I have been trying to change

Simple JS-calculator | Webflow spare parts by Nikita Vyutnov

To create a simple area calculator so just length x width to give a metre squared. I have added an extra input box, as his original is just one input rather than 2, tried manipulating his code but to no avail. I’ve also tried several forms of JS but still no joy can anyone help me? Has anyone done this before??

https://preview.webflow.com/preview/area-calculator-test-site?utm_medium=preview_link&utm_source=designer&utm_content=area-calculator-test-site&preview=a557b402e45fa721785e9b1868637a88&workflow=preview

Seems like it should be a doddle but obviously not for me


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Hey @Lids !
Looks like you are selecting the two inputs then adding the “trigger” on a variable that doesn’t exist (input).
You also need to use the input’s value in order to get the number
So to add the function to both of the values, you would do something like this:

var numOne = document.getElementById("num1");
var numTwo = document.getElementById("num2");

function calculate() {
    var theProduct = parseInt(numOne.value) * parseInt(numTwo.value) ;
    document.getElementById('area_result').innerHTML = theProduct.toFixed(2);
};

numOne.oninput = calculate;
numTwo.oninput = calculate;

Make sure you have an element with the id “area_result”

Hope this helps :slight_smile:

Hi Christos
Thank you so much for your help that was perfect. I’ve managed to create all the different calculators I need now. Definitely something that will help others I think