[WordPress] このコードを取得しようとしている '、ワードプレスのページ内での作業の機能

スポンサーリンク

質問

しかし、何もが表示されているときに、フィールドを強調表示、指定したページにドロップダウン リストが表示されます、この .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>

の答え

デバッグ私はコードのチャンクに分割し、各部分は予想どおりに機能をチェックします。この場合、コードは

  1. ページ上のデータを表示する
  2. 配列内のデータを探して
  3. 選択ボックスの変更を検出すて

ので最初にテスト手順 1.

イベントの選択] ボックスが変更されたときに発生ではない、

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

このスニペットは動作しません。それは良い – 私たちは、問題を認識しているし、捜すべきこと知っています。解決は このように発射しない変更イベントについてお答え である

正しいコードです。

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

素晴らしい !今ロールバックを元のコードと すべてが期待どおりに動作します。物事はまだ不安定な場合我々 はあまりにも手順 2 と 3 を個別にテストになります。問題を分割し、それらを個別にデバッグ、プログラマの親友です

今と将来に役立つことを願っています

http://stackoverflow.com/questions/28900376/trying-to-get-this-codes-functionality-working-within-a-wordpress-page

スポンサーリンク

Leave a Reply