試圖讓此代碼的功能在wordpress頁面中運行
[英]Trying to get this code's functionality working within a wordpress page
問題描述
下拉列表顯示在指定頁面上，但是突出顯示字段時則不顯示任何內容，當該文件位於.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 個解決方案
解決方案1
1 2015-03-06 14:52:18
為了調試，我將代碼分成多個部分，並按預期檢查每個部分的功能。 在這種情況下，代碼是
- 檢測選擇框更改
- 在數組中查找數據
- 在頁面上顯示數據
因此，讓我們首先測試步驟1 ...
<script>
nearestStore.onchange = function(){
alert('event fired');
}
</script>
此代碼段無效，選擇框更改時不會觸發該事件。 很好-我們已經確定了問題，並且知道要搜索什么。 解決的辦法是關於變更事件未觸發的SO答案 。
正確的代碼是；
<script>
nearestStore.addEventListener('change', function(){
alert('event fired');
});
</script>
大！ 現在，將其回滾到原始代碼， 一切都會按預期進行 。 如果情況仍然不妙，我們也將嘗試分別測試步驟2和3。 將問題分解成小塊並分別進行調試是程序員最好的朋友。
希望對現在和將來有所幫助。
試圖為div中的para寫一些“顯示/隱藏更多文本”功能
[英]Trying to write some 'Show/Hide More Text' functionality for para's within a div
如何找出哪些腳本代碼和/或插件在頁面上的元素內呈現外觀和功能？
[英]How to find out what script code and/or plugin is rendering appearance and functionality within an element on the page?
Wordpress在ajax請求回調中獲取當前頁面名稱或ID
[英]Wordpress get current page name or id within ajax request callback
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.