CODEWITHSUNDEEP
javascripthtmldom
Matchleader
Matchleader

Reputation: 77

How to make table using HTML DOM

I want to create td and tr in table using html dom but I got the error . Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null.

<html>
<head>
    <meta charset="utf-8"/>
    <title>Math game 2</title>
    <script type="text/javascript">
        var element = document.createElement("input");
        var element2 = document.createElement("input");
        var element3 = document.createElement("table");
        var valid = true;
        var valid2 = false;
        function rand(){
            var isZero = isEqual = 1;
            while( isEqual == 1 || isZero == 1 ){
                num = String(Math.ceil(Math.random() * 10000));
                isEqual = 0;
                isZero = 0;
                if( Number(num) > 1111 && num[0] != '0' && num[1] != '0' && num[2] != '0' && num[3] != '0' ){
                    for(i=0;i<=2;i++){
                        for(j=i+1;j<4;j++){
                            if( num[i] == num[j] ){
                                isEqual = 1;
                            }
                        }
                    }
                if( isEqual != 1 ){}
                }else{
                    isZero = 1;
                }
            }
            if( valid == true ){
                element.setAttribute("id","inp");
                element.setAttribute("type","text")
                element.setAttribute("placeholder","Enter your number");
                element.setAttribute("maxlength","4")
                document.body.appendChild(element);
                element2.setAttribute("type","button");
                element2.setAttribute("value","Let's go!");
                element2.setAttribute("onclick","ran()");
                document.body.appendChild(element2);
                valid = false;
            }
        }
        function ran(){
            var val = document.getElementById('inp').value;
            if( val.length == 4 ){
                if( valid2 == false ){
                    element3.setAttribute("border","2");
                    element3.style.margin="5px 2.5px";
                    document.body.appendChild(element3);
                    valid2 = true;
                }
                valueInsert();
            }else{
                alert('Error');
            }
        }
        function valueInsert(){
            var val = document.getElementById('inp').value;
            var rowCount = element3.rows.length;
            var row = element3.insertRow(rowCount);
            var cell1 = row.insertCell(0);
            cell1.innerHTML = val;
            cell1.appendChild("element3");
        }
    </script>
</head>
<body>
    <button onclick="rand()" onclick="ran()">Start Game</button><br/>
    <h1 id="answer"></h1>
</body>

please help me how to make td tr in table using html dom.

Upvotes: 2

Views: 114

Answers (1)

neli
neli

Reputation: 149

Just remove cell1.appendChild("element3"); line in your valueInsert method. It'll work.

    function valueInsert(){
        var val = document.getElementById('inp').value;
        var rowCount = element3.rows.length;
        var row = element3.insertRow(rowCount);
        var cell1 = row.insertCell(0);
        cell1.innerHTML = val;
    }

Upvotes: 2

Related Questions