0

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>
1
  • I tried concatenating within variable as seen at the bottom of the code, however I disregarded this with // Commented Mar 6, 2015 at 14:01

1 Answer 1

1

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

  1. detecting the select box change
  2. looking up data in the array
  3. 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.

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

5 Comments

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.
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 :(
Steps 2 and 3, I assume will allow this to work within the wordpress page? Thankyou for your time and patience.
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.
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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.