Javascript appendChild（td）在一个地方起作用，而不是另一个地方

Question

考虑以下HTML（表单中表格的一部分）：

<tr id="EnterForRow">
    <td>Entered for</td>
    <td><input type="radio" name="enterfor" value "0" checked>Myself
        <input type="radio" name="enterfor" value "1">Someone Else </td>
</tr>
<tr id="PrayerForRow">
    <td>Prayer for </td>
    <td> <input type="radio" name="prayerfor" value="0" checked>Myself
         <input type="radio" name="prayerfor" value="1">Someone Else </td>
</tr>

当用户单击“ Someone Else ，我有Javascript可以在行中显示一个新的文本输入框。 的JavaScript PrayerForRow工作，但是JavaScript进行EnterForRow不起作用。 我看不出任何明显的差异。 我想我盯着它太久了..

这有效：

var prayforRad =  document.getElementsByName('prayerfor');

for(var i = 0; i < prayforRad.length; i++) 
{
    prayforRad[i].onclick = function() 
    {
        var theValue = radioValue(document.getElementsByName('prayerfor'));
        if (theValue == "1") 
        {
              if (!document.getElementById("pfor")) 
            {
                var newTd = document.createElement("td");
                newTd.setAttribute("id", "pfor");
                var pforRow = document.getElementById("PrayerForRow");
                pforRow.appendChild(newTd);
                newTd.innerHTML = '<td>For: <input type="text" name="PrayFor" id="PrayFor" size="25"></td>';
            }
        }
        else
        {
            if (document.getElementById("pfor")) 
            {
                var pforRow = document.getElementById("PrayerForRow");
                var pf = document.getElementById("pfor");
                pforRow.removeChild(pf);
            }
        }
    }
}

这不是：

var enterforRad = document.getElementsByName('enterfor');
for(var j = 0; j < enterforRad.length; j++) 
{
    enterforRad[j].onclick = function() 
    {
        var theValue2 = radioValue(document.getElementsByName('enterfor'));
        if (theValue2 == "1") 
        {
            if (!document.getElementById("efor")) 
            {
                var newTD2 = document.createElement("td");
                newTD2.setAttribute("id", "efor");
                var eforRow = document.getElementById("EnterForRow");
                eforRow.appendChild(newTD2);
                newTD2.innerHTML = '<td>For: <input type="text" name="EntFor" id="EntFor" size="25"></td>';
            }
        }
        else
        {
            if (document.getElementById("efor")) 
            {
                var eforRow = document.getElementById("EnterForRow");
                var ef = document.getElementById("efor");
                eforRow.removeChild(ef);
            }
        }
    }
}

任何指针表示赞赏。

Answer 1

<td><input type="radio" name="enterfor" value "0" checked>Myself
    <input type="radio" name="enterfor" value "1">Someone Else </td>

我认为您失去了两个“ =”

Answer 2

正如我在评论中建议的那样，隐藏/显示现有元素比根据类似条件创建那些可选元素更好。

<tr id="EnterForRow">
    <td>Entered for</td>
    <td>
        <input type="radio" name="enterfor" value="0" checked />Myself
        <input type="radio" name="enterfor" value="1" />Someone Else
    </td>
    <td id="efor" style="display: none">For:
        <input type="text" name="EntFor" id="EntFor" size="25" />
    </td>
</tr>
<tr id="PrayerForRow">
    <td>Prayer for</td>
    <td>
        <input type="radio" name="prayerfor" value="0" checked />Myself
        <input type="radio" name="prayerfor" value="1" />Someone Else
    </td>
    <td id="pfor" style="display: none">For:
        <input type="text" name="PrayFor" id="PrayFor" size="25" />
    </td>
</tr>

然后

var prayforRad = document.getElementsByName('prayerfor');
for (var i = 0; i < prayforRad.length; i++) {
    prayforRad[i].onclick = function () {
        var theValue = radioValue(document.getElementsByName('prayerfor'));
        var pf = document.getElementById("pfor");
        pf.style.display = theValue == '1' ? '' : 'none'
    }
}

var enterforRad = document.getElementsByName('enterfor');
for (var j = 0; j < enterforRad.length; j++) {
    enterforRad[j].onclick = function () {
        var theValue2 = radioValue(document.getElementsByName('enterfor'));
        var ef = document.getElementById("efor");
        ef.style.display = theValue2 == '1' ? '' : 'none'
    }
}

演示： 小提琴

我也建议使用addEventListener（）添加侦听器，而不是使用onclick属性