Простой расчет с использованием 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>

В приведенном фрагменте я просто использовал Расфасовка как случайное не как 123, и ваш код работает fine..issue в РНР части, а не в другом месте ..

Также рекомендуется: удалите action="", так как он вызывает неустойчивое поведение в хром и других браузерах. Форма без действия будет отправляться на ту же страницу по умолчанию.