Question

这是我在这里的第一个问题。我一直都在使用这个网站，但从未在这里发布过。

当我调用函数writeMessage（）时，如果选中该复选框，则会创建textarea。取消选中该复选框后，将删除textarea。当我第二次检查复选框时，不会调用该函数。有什么建议？每次选中复选框时我都需要显示textarea，而不仅仅是第一次。以下是我的代码。

HTML：

<table>
    <th>
        <input type = "checkbox" name = "os0" id = "spaceForMsg" onClick = "writeMessage()">
        <label for "gift"> Gift for someone</label> 
    </th>

</table>

<table >
    <tr id = 'parent'>
        <div id = 'printMsg'></div>
    </tr>
</table>

javascript函数：

function writeMessage() {

    var x = document.getElementById('spaceForMsg');
    var docBody = document.getElementById('parent');
    var element = document.createElement('textarea');

    element.cols='60';
    element.rows='8';
    element.id = 'msgArea';

if (x.checked) {
    give = 'Type your gift message here: ';
    docBody.appendChild(element);

    } else {
        give = '';  
        y = document.getElementById('parent').parentNode;
        y.removeChild(y.childNodes[0]);

    }

    document.getElementById('printMsg').innerHTML = give;

}

Answer 1

writeMessage正在删除“document.getElementById('parent')的父亲的第一个孩子（恰好等于docBody）。这意味着您要删除docBody本身。

下次在删除writeMessage后致电docBody时，文档将无法找到合适的parent，因此docBody.appendChild(element);将失败。

请改为尝试：

function writeMessage() {
    var give;
    var x = document.getElementById('spaceForMsg');
    var docBody = document.getElementById('parent');

    if (x.checked) {
        var element = document.createElement('textarea');
        element.cols='60';
        element.rows='8';
        element.id = 'msgArea';
        give = 'Type your gift message here: ';
        docBody.appendChild(element);
    } else {
        give = '';  
        y = docBody.removeChild(docBody.getElementsByTagName('textarea')[0]);
    }

    document.getElementById('printMsg').innerHTML = give;

}

Answer 2

您要移除此<div id='parent'></div>行y.removeChild(y.childNodes[0]);，因此您无法存放任何内容，因为它不存在。

功能只能工作一次

2 个答案: