該功能只能運行一次

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

你叫下一次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

您將使用此行y.removeChild(y.childNodes[0]);刪除<div id='parent'></div> y.removeChild(y.childNodes[0]); ，因此您無法在其中放置任何東西，因為它不存在。