Java Script not Executing on Wordpress Page (this was a typo in code)

Question

This Question was a Typo

I am Working on a Wordpress 4.0 site and wanted to add a custom calculator on the Home Page. To help customers calculate their savings. The URL of the Home Page is https://northerncrushing.co.uk . I have tested the same code in a normal HTML page and it works fine. But just when I use in a wordpress page, it stops working. I am using Alterna Theme from themeforest with WooCommerce and Booking System Pro from CodeCanyon. This block is bottom right of my homepage above footer. The HTML is

<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>

Now the Script is :

    <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>

Already spent many hours without any luck. All the help is much appreciated.

APAD1 · Accepted Answer · 2014-10-15 15:04:12Z

1

The problem is your ID selectors are not set correctly, for instance:

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

An element with that ID does not exist, I think you want this instead:

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

Same thing with your other selectors:

    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");

edited Oct 15, 2014 at 15:04

answered Oct 15, 2014 at 14:30

APAD1

13.7k8 gold badges47 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Maharshi Raval Over a year ago

Thanks alot for your Help @APAD1 . I Really can believe I ended up spending 4 hours because of this mistake of mine

APAD1 Over a year ago

No problem at all, we've all been there ;) A quick hint though, when you are having issues with Javascript, check the developer console in your browser to see if you're getting any errors, that's how I discovered the issue so quickly. I was getting Uncaught TypeError: Cannot read property 'value' of null

Collectives™ on Stack Overflow

Java Script not Executing on Wordpress Page (this was a typo in code)

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related