Thank you very much for your support.
Currently studying JavaScript.
The functions are as follows.
1: When the registration button is pressed, the contents of the text box are added to the child element.
2: When the number of child elements added above exceeds 5, the child elements are hidden with "display: none".

I implemented the function "1", but when I tried to implement "2", the following error occurred.

I personally think that the timing to hide is bad.

I changed the mounting location, but the result was not resolved.
Please give me a professor of a solution.

Error message
ToDoList.js: 38 Uncaught TypeError: Cannot set property 'display' of undefined
    At HTMLInputElement.document.getElementById.onclick (ToDoList.js: 38)
Applicable source code
document.getElementById ('insert'). onclick = function () {
    var textnode = document.getElementById ('textbox');
    var textinput = textnode.value;
    var todonode = document.getElementById ('todolist');
// Create a child element if the text box value is not null.
    if (textinput! = null) {
        var p = document.createElement ('p');
        p.innerHTML = textinput;
        var addtodolist = document.getElementById ('todolist');
        addtodolist.appendChild (p);
        // Determine here and hide child elements.
        if (addtodolist.childElementCount>= 5) {
            //addtodolist.children.style.display='none ';

Please describe what you tried for the problem here.

Supplemental information (FW/tool version etc.)

Please provide more detailed information here.

  • Answer # 1

    element.children can take an element as an array
    Rotate with a for statement and add'none'to each display

    childrenreturnsHTMLCollectionchildren [0]should be used.

    [ParentNode.children-Web API interface | MDN]

Related articles