使用PHP和JS进行简单计算

Question

我正在尝试在我们的网站上创建一个简单的计算器。 运行该函数时不会刷新页面。

我有两个数字，只有一个是用户输入的。 我有.php文件和一个外部.js文件。 我对JavaScript非常陌生。

我的PHP代码：

<?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>

我的JavaScrpit文件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
}

我要实现的是要在计算中使用的用户输入的值，然后将其显示在页面上的<p id="calcresults"> 。

该按钮似乎根本不执行任何操作。

我的问题是：我在做什么错？

Answer 1

该代码可以作为纯HTML正常工作。 需要检查的是js文件的路径是否正确以及是否存在控制台错误。 我还将在浏览器中检查源代码，以检查php的按钮是否在做奇怪的事情。

Answer 2

 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 } 

 <p id="packsize">123</p> <form action="" id="floorcalc" method="POST"> <input type="text" name="floorinput" id="floorinput" /> </form> <button onclick="Calculate()">Calculate</button> <p id="calcresult"></p> 

在上面的代码片段中，我只是将packsize用作不像123这样的随机数，并且您的代码工作正常。.issue在您的php部分中，而不是其他任何地方。

还建议 ：删除action=""因为它会导致chrome和其他浏览器中的行为不稳定。默认情况下，没有操作的表单将提交到同一页面。