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>

在上面的代码片段中，我只使用了packize作为一个随机的不喜欢123，你的代码工作得很好..问题是在你的php部分而不是其他任何地方..

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

使用PHP和JS进行简单计算

2 个答案: