使用 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，您的代码工作正常..问题出在您的 php 部分，而不是其他任何地方..

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

使用 PHP 和 JS 的简单计算

Simple Calculation using PHP and JS

javascript

php

jquery

joomla3.0

virtuemart