Simple Calculation using PHP and JS

Question

I am trying to create a simple calculator on our website. Which doesn't refresh the page when the function is run.

I have two numbers, only one of which is user inputted. I have the .php file and an external .js file. I am very new to JavaScript.

My php code:

<?php
$packsize = round($this->product->product_packaging, 2); ?>
<p id="packsize"><?php echo $packsize ?></p>
<form action="" id="floorcalc" method="POST">
 <input type="text" name="floorinput" id="floorinput" />
</form>
<button onclick="Calculate()">Calculate</button>

<p id="calcresult"></p>

<script type="text/javascript" src="public_html/templates/avant/js/floorcalc.js"></script>

My JavaScrpit file floorcalc.js :

function Calculate() {
 var forminput = document.getElementById("floorinput");
 var rqarea = 0;
 var packdiv = document.getElementById("packsize");
 var packsize = packdiv.textContent;

 if (forminput.value!="") {
    rqarea =  parseInt(forminput.value);
 }

 var result = rqarea / packsize;

 document.getElementById("calcresult").innerHTML = result
}

What I am trying to achieve is the user inputted value to be used in a calculation, then shown on the page in the <p id="calcresults">.

The button doesn't seem to do anything at all.

My question is: what am I doing wrong?

Answer 1

The code works fine as pure HTML. Things to check would be that the path to the js file is correct and if there are console errors. I would also check the source in the browser to check that php isn't doing something odd to your button.