Trying to get this code's functionality working within a wordpress page

Question

The dropdown appears on the specified page however when highlighting the fields, nothing is appearing, when this is inside a .html file the functionality works fine and details switch.

Really need some help with this and would be grateful for any form of insight.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
</head>

<body>
<label for="programSelect">  Please choose a Programme<br><br></label>
<select id="nearestStore">
  <option value="noSelection">Please Select</option>
  <option value="StudyP">Study Programmes</option>
  <option value="s2">Traineeships</option>
  <option value="s3">Accountancy</option>
  <option value="s4">Agricultural and Land Based</option>
  <option value="s5">Animal Care</option>
  <option value="s6">Beauty Therapy</option>
  <option value="s7">Business Improvement Tech</option>
  <option value="s8">Business Administration</option>
  <option value="s9">Call Centres</option>
  <option value="s10">Creative arts</option>
  <option value="s11">Construction</option>
  <option value="s12">Customer service</option>
  <option value="s13">Cyber Security</option>
  <option value="s14">Early years ChildCare & Education</option>
  <option value="s15">ElectroTechnical</option>
  <option value="s16">Engineering</option>
  <option value="s17">Equine</option>
  <option value="s18">Hairdressing Barbering</option>
  <option value="s19">Horticulture</option>
  <option value="s20">Health & Social Care</option>
  <option value="s21">Hospitality & Catering</option>
  <option value="s22">Information Technology</option>
  <option value="s23">IT Software Development</option>
  <option value="s24">Team Leading or Management</option>
  <option value="s25">Manufacturing</option>
  <option value="s26">Marketing</option>
  <option value="s27">Motor vehicle maintenance</option>
  <option value="s28">Motor Vehicle Body & Paint</option>
  <option value="s29">Plumbing or Heating Vent</option>
  <option value="s30">Retail & Distribution</option>
  <option value="s31">Sales & Telesales</option>
  <option value="s32">Social Media & Digital marketing</option>
  <option value="s33">Sports & Recreation</option>
  <option value="s34">Teaching assistants</option>
  <option value="s35">Web Design</option>
  <option value="s36">Warehousing</option>
 </select>

 <div id="phoneNumber"></div>

 <script>
  var nearestStore = document.getElementById("nearestStore"),
      phoneNumber = document.getElementById("phoneNumber"),

      contactdetails = {
        noSelection: "",
        StudyP: "<br><a href='http://www.howcollege.ac.uk'>Heart of       Worcestershire College</a><br>Emily Leleu<br>01905 743587<br>[email protected]<br><br><a href='http://www.warwickshire.ac.uk/colleges/henley-in-arden.aspx'>Henley in Arden College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>[email protected]<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>[email protected]<br><br><a href='http://www.kidderminster.ac.uk'>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>[email protected]<br><br><a href='http://www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>[email protected]<br><br><a href='http://www.warwickshire.ac.uk/colleges/pershore_college.aspx'>Pershore College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>[email protected]<br><br><a href='http://www.pathwaygroup.co.uk/'>The Pathway Group</a><br>Barry Knight<br>0121 707 0550<br>[email protected]<br><br><a href='http://www.sworcs.ac.uk/'>South Worcestershire College</a><br>Donna Haris<br>01386 712722<br>[email protected]<br><br><a href='http://www.stokecollege.ac.uk/'>Stoke on Trent College</a><br>Jayne Griffiths<br>01562 732201 or 07786113867<br>[email protected]<br><br><a href='http://www..co.uk/'>2 Counties Training</a><br>person<br>number",
        s2: "<br>LMPQ",
        s3: "",
        s4: "",
        s5: "",
        s6: "",
        s7: "",
        s8: "",
        s9: "",
        s10: "",
        s11: "",
        s12: "",
        s13: "",
        s14: "",
        s15: "",
        s16: "",
        s17: "",
        s18: "",
        s19: "",
        s20: "",
        s21: "",
        s22: "",
        s23: "",
        s24: "",
        s25: "",
        s26: "",
        s27: "",
        s28: "",
        s29: "",
        s30: "",
        s31: "",
        s32: "",
        s33: "",
        s34: "",
        s35: "",
        s36: "",



}

  nearestStore.onchange = function(){
    phoneNumber.innerHTML = contactdetails[this.value];

    //var previousString = contactdetails.StudyP; previousString =     previousString.concat("<br><a href='http://www.warwickshire.ac.uk/colleges/henley-in-arden.aspx'>Henley in Arden College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>[email protected]<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>[email protected]<br><a href='www.kidderminster.ac.uk'><br>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>[email protected]<br><br><a href='www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>[email protected]<br><br><a href='http://www.warwickshire.ac.uk/colleges/pershore_college.aspx'>Pershore College</a><br>Students - 0300 45 600 49<br>Employers - 0300 45 600 46<br>[email protected]<br>"); phoneNumber.innerHTML = previousString;
    //var previousString2 = contactdetails.s2; previousString2 =   previousString2.concat("<br>Birmingham MET College"); phoneNumber.innerHTML =    previousString2;
    }



</script>
</body>
</html>

I tried concatenating within variable as seen at the bottom of the code, however I disregarded this with // — Si Clenton
– Si Clenton, Commented Mar 6, 2015 at 14:01

Community · Accepted Answer · 2017-05-23 11:56:53Z

1

For debugging I break the code into chunks and check each part functions as expected. In this case the code is

detecting the select box change
looking up data in the array
displaying the data on the page

So let's test step 1 first...

<script>
  nearestStore.onchange = function(){
    alert('event fired');
  }
</script>

This snippet doesn't work, the event isn't fired when the select box changes. That's good - we've identified the problem and know what to search for. The solution lies in this SO answer about change events not firing.

The correct code is;

<script>
  nearestStore.addEventListener('change', function(){
    alert('event fired');
  });
</script>

Great! Now roll that back in to the original code and everything works as expected. If things were still wonky we would look to test steps 2 and 3 individually too. Breaking a problem into smaller pieces and debugging them individually is a programmer's best friend.

Hope that helps now and in the future.

edited May 23, 2017 at 11:56

CommunityBot

11 silver badge

answered Mar 6, 2015 at 14:52

NoChecksum

1,2461 gold badge14 silver badges34 bronze badges

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

5 Comments

Daan Over a year ago

Really love this way of answering. Seems like you're giving really helpful information to the question asker instead of just a fix. Got my +1 for your effort.

Si Clenton Over a year ago

Thankyou for your fast response and breaking everything down for me. Although this works, when I place the entirety into a Wordpress page, only the dropdown shows, when I select a course, nothing shows :(

Si Clenton Over a year ago

Steps 2 and 3, I assume will allow this to work within the wordpress page? Thankyou for your time and patience.

NoChecksum Over a year ago

Yes 2 and 3 should work in any web page. Test at every step. If you have a working "standalone" demo which fails to work in a Wordpress page you know it's a compatibility issue (another advantage to breaking a task into smaller units)... Wordpress will be adding a lot of other HTML and Javascript to your page - check for duplicate IDs or script errors.

Si Clenton Over a year ago

I am not aware that there are errors in the code. I am sure that it should be a java script WordPress compatibility issue. perhaps my s2...variables are duplicated? I am trying plugins for wordpress that allows javascript functionality. Although I assumed that there was already that. Thankyou for your time this afternoon honestly, it has been invaluable.

Collectives™ on Stack Overflow

Trying to get this code's functionality working within a wordpress page

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related