个人中心
gpt4 book ai didi

javascript - 尝试让此代码的功能在 WordPress 页面中运行

转载 作者：行者123 更新时间：2023-12-03 10:38:16 24 4
gpt4 key购买 nike

下拉列表出现在指定页面上，但是当突出显示字段时，没有任何内容出现，当它位于 .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>

最佳答案

为了调试，我将代码分成 block 并检查每个部分是否按预期运行。在本例中，代码是

  1. 检测选择框更改
  2. 在数组中查找数据
  3. 在页面上显示数据

所以让我们先测试一下步骤 1...

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

此代码片段不起作用，当选择框更改时不会触发该事件。这很好 - 我们已经确定了问题并知道要搜索什么。解决办法就在this SO answer about change events not firing .

正确的代码是；

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

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

希望现在和将来有所帮助。

关于javascript - 尝试让此代码的功能在 WordPress 页面中运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28900376/

24 4 0
文章推荐： javascript - Angular 与 wavesurfer.js 在 IE10 中不起作用
文章推荐： javascript - 如何在 JavaScript 中从不同端口向资源写入 URL(无需主机名)
文章推荐： javascript - 我可以在发布表单输入时重定向到新的 php 文件吗？
文章推荐： javascript:如何通过名称字符串调用 var？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com