试图让这个代码的功能在 wordpress 页面中工作答案

【问题标题】：Trying to get this code's functionality working within a wordpress page试图让这个代码的功能在 wordpress 页面中工作
【发布时间】：2015-03-06 13:59:34
【问题描述】：

下拉菜单出现在指定页面上，但是当突出显示字段时，什么都没有出现，当它位于 .html 文件中时，功能可以正常工作并且详细信息会切换。

在这方面确实需要一些帮助，如果您能提供任何形式的见解，我们将不胜感激。

<!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>eleleu@wortech.ac.uk<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>info@warkscol.ac.uk<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>kerry.davies@hittraining.co.uk<br><br><a href='http://www.kidderminster.ac.uk'>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>jshort@kidderminster.ac.uk<br><br><a href='http://www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>Nick.smith@novatraining.co.uk<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>info@warkscol.ac.uk<br><br><a href='http://www.pathwaygroup.co.uk/'>The Pathway Group</a><br>Barry Knight<br>0121 707 0550<br>Barry@pathwaygroup.co.uk<br><br><a href='http://www.sworcs.ac.uk/'>South Worcestershire College</a><br>Donna Haris<br>01386 712722<br>dharris@evesham.ac.uk<br><br><a href='http://www.stokecollege.ac.uk/'>Stoke on Trent College</a><br>Jayne Griffiths<br>01562 732201 or 07786113867<br>jayne.griffiths@stokecoll.ac.uk<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>info@warkscol.ac.uk<br><br><a href='http://www.hittraining.co.uk'>HIT Training</a><br>Kerry Davies<br>07535630686<br>kerry.davies@hittraining.co.uk<br><a href='www.kidderminster.ac.uk'><br>Kidderminster College</a><br>Jennie Short<br>01562 826501<br>jshort@kidderminster.ac.uk<br><br><a href='www.novatraining.co.uk/'>Nova Training</a><br>Nick Smith<br>01527591048<br>Nick.smith@novatraining.co.uk<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>info@warkscol.ac.uk<br>"); phoneNumber.innerHTML = previousString;
    //var previousString2 = contactdetails.s2; previousString2 =   previousString2.concat("<br>Birmingham MET College"); phoneNumber.innerHTML =    previousString2;
    }



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

【问题讨论】：

我尝试在变量内连接，如代码底部所示，但是我用 // 忽略了这一点

标签： javascript html wordpress

【解决方案1】：

为了调试，我将代码分成块并按预期检查每个部分的功能。在这种情况下，代码是

检测选择框变化
在数组中查找数据
在页面上显示数据

所以让我们先测试第 1 步...

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

This sn-p doesn't work, the event isn't fired when the select box changes.这很好 - 我们已经确定了问题并知道要搜索什么。解决方法在于this SO answer about change events not firing。

正确的代码是；

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

太棒了！现在回滚到原始代码和everything works as expected。如果事情仍然不稳定，我们也会单独测试第 2 步和第 3 步。将问题分解成更小的部分并单独调试它们是程序员最好的朋友。

希望对现在和未来有所帮助。

【讨论】：

真的很喜欢这种回答方式。似乎您正在向提问者提供非常有用的信息，而不仅仅是修复。为您的努力获得了我的 +1。
感谢您的快速响应并为我打破一切。虽然这可行，但当我将整个页面放入 Wordpress 页面时，只有下拉菜单显示，当我选择一门课程时，什么也没有显示:(
步骤 2 和 3，我认为这将允许它在 wordpress 页面中工作？感谢您的时间和耐心。
是的 2 和 3 应该适用于任何网页。测试每一步。如果您的“独立”演示无法在 Wordpress 页面中运行，您就会知道这是一个兼容性问题（将任务分解为更小的单元的另一个优势）...... Wordpress 将添加许多其他 HTML 和 Javascript 到您的页面 - 检查重复的 ID 或脚本错误。
我不知道代码中有错误。我确信它应该是一个 java 脚本 WordPress 兼容性问题。也许我的 s2...变量重复了？我正在尝试允许 javascript 功能的 wordpress 插件。虽然我认为已经有了。老实说，感谢您今天下午的宝贵时间，这非常宝贵。