функция только работает один раз

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 после ремонта oving 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]);, так что вы не можете положить что-нибудь там, так как он не существует.