没有插件脚本的自定义计算器 Wordpress答案

【问题标题】：Custom Calculator Wordpress without plugin Script没有插件脚本的自定义计算器 Wordpress
【发布时间】：2017-02-05 11:43:51
【问题描述】：

您好，我用一些指南编写了一个带有 3 个输入字段的计算器，用于计算有氧运动的心率，但我似乎在将它们应用到我的 wordpress 中时遇到了问题

在 web 的 tryouteditor 中试用它时，它正在工作 (http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_default_css)

在 wordpress 中它只显示代码（是的，我在 HTML 中输入）我没有服务器，所以我只用浏览器访问wordpress，没有使用插件

请帮帮我代码如下：

    <html>
    <script>
    function calc(form) {

    var D = "0";
    var E = "0";
    var A = document.getElementById("num1").value;
    var B = document.getElementById("op").value;
    var C = document.getElementById("num2").value;

    if (C === "GI")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('5'))/parseInt('10')
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10'); 
    }
    else if(C === "A1")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
    }
    else if(C === "A2")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
    }
    else if (C === "A3")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
    }
    else if (C === "A4")
    {
    D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
    E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('10'))/parseInt('10');
    }
    document.getElementById("result").innerHTML = D;
    document.getElementById("result2").innerHTML = E;
    return false;
    }
    </script>
    <body>
    Heart Rate when waking up
    <input type="text" id="num1" name="num1" />
    <br>
    Age
    <input type="text" id="op" name="op" />
    <br>
    Intensity GI - A4
    <input type="text" id="num2" name="num2" />
    <br />
    <input type="button" value="Solve" onClick="calc(this)">

    <p id="result" name="r1">
    <p id="result2" name="r2">
    <br />
    </p>
    </body>
    </html>

【问题讨论】：

请详细说明您的问题，以便我们知道问题所在。谢谢！
在 wordpress 中它只显示代码而不是代码应该做什么

标签： php html wordpress calculator

【解决方案1】：

首先，您需要创建一个新的页面模板。创建一个类似calculator-template.php的页面模板

然后在文件里面这样写：

<?php 
/*
Template Name: Heart Calculator
*/ get_header();
?>
<script>
//your js codes
</script>
<!-- Write your html codes. Do not include body tag -->
<?php get_footer(); ?>

现在您应该转到 Wordpress 仪表板>添加新页面>从右侧小部件中选择 Heart Calculator 页面模板。并发布！

对于使用 wordpress.com

在wordpress的页面编辑器中直接复制粘贴代码。确保选择文本模式

<script>
function calc(form) {
var D = "0";
var E = "0";
var A = document.getElementById("num1").value;
var B = document.getElementById("op").value;
var C = document.getElementById("num2").value;
if (C === "GI")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('5'))/parseInt('10')
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10'); 
}
else if(C === "A1")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('6'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
}
else if(C === "A2")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('7'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
}
else if (C === "A3")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('8'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
}
else if (C === "A4")
{
D = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('9'))/parseInt('10');
E = parseInt(A)+((parseInt('220')-parseInt(B)-parseInt(A))*parseInt('10'))/parseInt('10');
}
document.getElementById("result").innerHTML = D;
document.getElementById("result2").innerHTML = E;
return false;
}
</script>

Heart Rate when waking up
<input type="text" id="num1" name="num1" />
<br>
Age
<input type="text" id="op" name="op" />
<br>
Intensity GI - A4
<input type="text" id="num2" name="num2" />
<br />
<input type="button" value="Solve" onClick="calc(this)">

<p id="result" name="r1">
<p id="result2" name="r2">
<br />
</p>

我刚刚测试过它并且它有效！你现在可以走了！

【讨论】：

如何新建页面模板？我找到了这个指南wpbeginner.com/wp-themes/…，但是用 WINSCP 连接到我的网站我只找到根目录，没有 wp-content:( 我在哪里添加正文标签？对不起，我通常不写代码
好的。安装这个插件wordpress.org/plugins/add-custom-page-template。首先按照我说的，然后安装插件。使用插件上传模板文件。那你就可以走了！
就像我说的我在未安装的浏览器中使用 wordpress，因此我无法安装插件（就像我的标题中没有插件一样）“如果您使用的是 WordPress.com，那么您无法安装插件。”
你能把登录后的WinSCP截图发给我吗？
感谢您的帮助，但是当我在公共页面中添加此代码时，仍然只有公式。代码中唯一的区别是没有 HTML-tag 和 body-tag 我在 html-mode 中输入了代码