函数只能工作一次

Question

这是我在这里的第一个问题。我一直使用这个网站，但从来没有在这里发过帖子。

当我调用函数 writeMessage() 时，当复选框被选中时，文本区域被创建。当我取消选中该复选框时，文本区域将被删除。当我第二次选中该复选框时，不会调用该函数。有什么建议么？我需要它在选中复选框时显示文本区域，而不仅仅是第一次。下面是我的代码。

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本身。

删除 docBody 后下次调用 writeMessage 时，文档将无法找到合适的 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

您正在使用这一行 y.removeChild(y.childNodes[0]); 删除 <div id='parent'></div>，因此您不能在其中放置任何内容，因为它不存在。

函数只能工作一次

function only works one time

html

javascript

checkbox