PHPとJSを使用した簡単な計算

Question

私はウェブサイトで簡単な電卓を作成しようとしています。この機能を実行すると、ページをリフレッシュしません。

私は2つの番号を持っていますが、そのうちの1つだけがユーザー入力です。私は.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>

ランダム123のようなノーとあなたのコードのように私はちょうど使用packsizeはfine..issueは、PHPの一部であるといないどこか他の作品..

また、をお勧めします：action=""を削除すると、クロームや他のブラウザでエラーが発生します。アクションのないフォームはデフォルトで同じページに送信されます。