使用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和您的代碼工作fine..issue是在你的PHP一部分，而不是其他任何地方..

也推薦：刪除您的action=""，因爲它會導致Chrome和其他瀏覽器出現不穩定的行爲。默認情況下，沒有任何操作的表單將提交到同一頁面。