JavaScript在wordpress页面中不工作

我已将以下代码添加到我的wordpress页面：

<form action="#" method="post"><label for="number">Number of guests: *
<input name="number" type="radio" value="1" />1
<input name="number" type="radio" value="2" />2
<input name="number" type="radio" value="3" />3
<input name="number" type="radio" value="4" />4
<input name="number" type="radio" value="5" />5</label>
<div id="rsvp1" style="display:none"><label for="name">Name: *
<input name="name" type="text" value="" />
</label>
<label for="attending">Attending?: *
<input name="attending" type="radio" value="Yes" />Yes
<input name="attending" type="radio" value="No" />No</label>
<label for="dietary">Dietary Requirements?: *
<input name="dietary" type="checkbox" value="veggie" />Veggie


<input name="dietary" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies"></textarea>
</label>
<label for="notes">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes"></textarea>
</label></div>
<div id="rsvp2" style="display:none"><label for="name1">Name: *
<input name="name1" type="text" value="" />
</label>
<label for="attending1">Attending?: *
<input name="attending1" type="radio" value="Yes" />Yes
<input name="attending1" type="radio" value="No" />No</label>
<label for="dietary1">Dietary Requirements?: *
<input name="dietary1" type="checkbox" value="veggie" />Veggie


<input name="dietary1" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies1"></textarea>
</label>
<label for="notes1">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes1"></textarea>
</label></div>
<div id="rsvp3" style="display:none"><label for="name2">Name: *
<input name="name2" type="text" value="" />
</label>
<label for="attending2">Attending?: *
<input name="attending2" type="radio" value="Yes" />Yes
<input name="attending2" type="radio" value="No" />No</label>
<label for="dietary2">Dietary Requirements?: *
<input name="dietary2" type="checkbox" value="veggie" />Veggie


<input name="dietary2" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies2"></textarea>
</label>
<label for="notes2">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes2"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name3">Name: *
<input name="name3" type="text" value="" />
</label>
<label for="attending3">Attending?: *
<input name="attending3" type="radio" value="Yes" />Yes
<input name="attending3" type="radio" value="No" />No</label>
<label for="dietary3">Dietary Requirements?: *
<input name="dietary3" type="checkbox" value="veggie" />Veggie


<input name="dietary3" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies3"></textarea>
</label>
<label for="notes3">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes3"></textarea>
</label></div>
<div id="rsvp4" style="display:none"><label for="name4">Name: *
<input name="name4" type="text" value="" />
</label>
<label for="attending4">Attending?: *
<input name="attending4" type="radio" value="Yes" />Yes
<input name="attending4" type="radio" value="No" />No</label>
<label for="dietary4">Dietary Requirements?: *
<input name="dietary4" type="checkbox" value="veggie" />Veggie


<input name="dietary4" type="checkbox" value="allergies" />Allergies (Please State)


<textarea style="margin: 2px; width: 177px; height: 34px;" name="allergies4"></textarea>
</label>
<label for="notes4">Notes (high chair/booster seat/childs meal/ etc.): *
<textarea style="margin: 2px; width: 177px; height: 34px;" name="notes4"></textarea>
</label></div>
<input name="submitted" type="hidden" value="1" />
<input type="submit" />

</form>

<script type="text/javascript">
    function showRSVP() {
    var checked = this,
        n = parseInt(checked.value, 10),
        rsvpElems = document.querySelectorAll('div[id^="rsvp"]'),
        tmp;

    for (var i = 0, len = rsvpElems.length; i < len; ++i){
        tmp = rsvpElems[i];
        tmp.style.display = i < n ? 'block' : 'none';
    }
}

var radios = document.querySelectorAll('input[name="number"][type="radio"]');

for (var i = 0, len = radios.length; i < len; i++){
    radios[i].addEventListener('change', showRSVP);
}
</script>

宾客人数：*
1.
2.
3.
4.
5.
姓名：*
出席会议？：*
对
不
饮食要求？：*
素食者
过敏（请说明）
注意事项（高脚椅/垫高椅/儿童餐等）：*
姓名：*
出席会议？：*
对
不
饮食要求？：*
素食者
过敏（请说明）
注意事项（高脚椅/垫高椅/儿童餐等）：*
姓名：*
出席会议？：*
对
不
饮食要求？：*
素食者
过敏（请说明）
注意事项（高脚椅/垫高椅/儿童餐等）：*
姓名：*
出席会议？：*
对
不
饮食要求？：*
素食者
过敏（请说明）
注意事项（高脚椅/垫高椅/儿童餐等）：*
姓名：*
出席会议？：*
对
不
饮食要求？：*
素食者
过敏（请说明）
注意事项（高脚椅/垫高椅/儿童餐等）：*
函数showRSVP（）{
var checked=此，
n=parseInt（选中的值，10），
rsvpElems=document.querySelectorAll（'div[id^=“rsvp”]”），
tmp；
对于（变量i=0，len=rsvpElems.length；i

但是javascript不起作用，它在JSFIDLE中起作用，但在wordpress页面中不起作用

---

页面处于活动状态

为了在帖子或页面中使用

脚本

，您需要将其保存为外部文件，然后调用js

函数

（）

因此，在您的情况下，创建一个新的js文件并将脚本放入。（另存为rsvp.js）

函数showRSVP（）{
var checked=此，
n=parseInt（选中的值，10），
rsvpElems=document.querySelectorAll（'div[id^=“rsvp”]”），
tmp；
对于（变量i=0，len=rsvpElems.length；i

然后在您的帖子中添加：

<script type="text/javascript" src="YOUR_LOCATION/rsvp.js"></script>
<script type="text/javascript">
<!--
showRSVP();
//--></script>

它是否住在某个我能看到的地方？请检查您的控制台。。。您有由p标记引起的语法错误-由wordpress自动添加。将javascript直接放在header.php（或需要的地方），不要通过管理面板将其放在wp中。。。。

<script type="text/javascript" src="YOUR_LOCATION/rsvp.js"></script>
<script type="text/javascript">
<!--
showRSVP();
//--></script>