javascript - Java 脚本未在 Wordpress 页面上执行(这是代码中的拼写错误)

Question

这个问题是一个拼写错误

我正在开发 Wordpress 4.0 网站，并希望在主页上添加自定义计算器。帮助客户计算他们的节省。主页的URL是https://northerncrushing.co.uk 。我已经在普通 HTML 页面中测试了相同的代码，并且运行良好。但当我在 WordPress 页面中使用时，它就停止工作了。我将 themeforest 的 Alterna 主题与 CodeCanyon 的 WooCommerce 和 Booking System Pro 一起使用。该 block 位于我主页页脚上方的右下角。HTML 是

<div><form>
<table>
<tbody>
<tr>
<td>Crusher Hire Rate :</td>
<td>£ <input id="hireRate" disabled="disabled" name="hireRate" type="number" value="160" /></td>
</tr>
<tr>
<td>Tons Crushed per Job :</td>
<td>   <input id="tonesCrushed" name="tonesCrushed" type="number" value="16" /></td>
</tr>
<tr>
<td>No. of skips SAVED :</td>
<td>   <input id="skipsSaved" disabled="disabled" name="skipsSaved" type="number" value="2" /></td>
</tr>
<tr>
<td>Skip Rate :</td>
<td>£ <input id="skipRate" name="skipRate" type="number" value="145" /></td>
</tr>
<tr>
<td>Skip Saving :</td>
<td>£ <input id="skipSaving" disabled="disabled" name="skipSaving" type="number" value="290" /></td>
</tr>
<tr>
<td>Aggregate cost per tonne :</td>
<td>£ <input id="aggregateCost" name="aggregateCost" type="number" value="10" /></td>
</tr>
<tr>
<td>Aggregate SAVED :</td>
<td>£ <input id="aggregateSaving" disabled="disabled" name="aggregateSaving" type="number" value="160" /></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>
</form></div>

<hr />

<strong>Total SAVING : </strong>£ <input id="totalSaving" disabled="disabled" name="totalSaving" type="number" value="290" />
<a href="javascript:calculateSavings4000();">Calculate</a>

现在脚本是:

    <script>
function calculateSavings4000(){
    var hr = document.getElementById("hireRate4000").value;
    var ton = document.getElementById("tonesCrushed4000").value;
    var skiprate = document.getElementById("skipRate4000").value;
    var act = document.getElementById("aggregateCost4000").value;

    var noskips = Math.ceil(ton/8);
    var skipsaving = noskips * skiprate;
    var agrsaved = act * ton;
    var saving = ((agrsaved + skipsaving) - hr);

    var noskip_val = document.getElementById("skipsSaved4000");
    noskip_val.value = noskips;

    var skipsaving_val = document.getElementById("skipSaving4000");
    skipsaving_val.value = skipsaving;

    var agrsaved_val = document.getElementById("aggregateSaving4000");
    agrsaved_val.value = agrsaved;

    var total = document.getElementById("totalSaving4000");
    total.value = saving;   

}
</script>

已经花了很多小时但没有任何运气。非常感谢所有的帮助。

Answer 1

问题是您的 ID 选择器设置不正确，例如:

var hr = document.getElementById("hireRate4000").value;

具有该 ID 的元素不存在，我认为您需要这个:

var hr = document.getElementById("hireRate").value;

与其他选择器相同:

    var ton = document.getElementById("tonesCrushed").value;
    var skiprate = document.getElementById("skipRate").value;
    var act = document.getElementById("aggregateCost").value;
    var noskip_val = document.getElementById("skipsSaved");
    var skipsaving_val = document.getElementById("skipSaving");
    var agrsaved_val = document.getElementById("aggregateSaving");
    var total = document.getElementById("totalSaving");