使用 PHP 和 JS 的简单计算
Simple Calculation using PHP and JS
我正在尝试在我们的网站上创建一个简单的计算器。当函数为 运行.
时不刷新页面
我有两个数字,其中只有一个是用户输入的。我有 .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">
的页面上。
该按钮似乎根本没有执行任何操作。
我的问题是:我做错了什么?
该代码与纯 HTML 一样运行良好。要检查的是 js 文件的路径是否正确以及是否存在控制台错误。我还会检查浏览器中的源代码,以检查 php 是否对您的按钮做了一些奇怪的事情。
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 文件。我是 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">
的页面上。
该按钮似乎根本没有执行任何操作。
我的问题是:我做错了什么?
该代码与纯 HTML 一样运行良好。要检查的是 js 文件的路径是否正确以及是否存在控制台错误。我还会检查浏览器中的源代码,以检查 php 是否对您的按钮做了一些奇怪的事情。
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和其他浏览器中导致不稳定的行为。没有操作的表单将提交到同一页面默认情况下。