How to get elements from multidimensional arrangement in Javascript

Question

I populated my array with buttons (using document.create ("input")). I want to print them on the screen, but I could not get the mainArr [i] [j] element. When I console.log () it, type undefined, but outside the scope it gives what I expected. I tried this:

for (var i = 0; i < mainArr.length; i++) {

                var p = document.createElement('P');

                for (var j = 0; j < mainArr[i].length; j++) { 

                    element = mainArr[i][j];

                    p.appendChild(element);
                }
                $('#keyPad').append(p);
            }

I expect this conclusion:

<p>
                <input type="button" class="sil" value="C" style="width:50px">
                <input type="button" class="hepsiniSil" value="AC" style="width:50px">
            </p>
            <p>
                <input type="button" class="buttons" value="7">
                <input type="button" class="buttons" value="8">
                <input type="button" class="buttons" value="9">
                <input type="button" class="buttons" value="*" >
            </p>
            <p>
                <input type="button" class="buttons" value="4">
                <input type="button" class="buttons" value="5">
                <input type="button" class="buttons" value="6">
                <input type="button" class="buttons" value="-">
            </p>
            <p>
                <input type="button" class="buttons" value="1">
                <input type="button" class="buttons" value="2">
                <input type="button" class="buttons" value="3">
                <input type="button" class="buttons" value="+">
            </p>
            <p>
                <input type="button" class="buttons" value="0">
                <input type="button" value="=" style="width:50px" onclick='esittir()'>
                <input type="button" class="buttons" value="/">

            </p>

The following is shown:

$(document).ready(function () {

        var butArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '+', '-', '*', '/', '=', 'C', "AC"];
        var mainArr = [];           


            $('.createBut').click(function () {

                var but = document.createElement("input");

                var butClass = $('#inputClass').val();
                var butValue = $('#inputValue').val();
                var butRow = $('#inputRow').val();
                var butColumn = $('#inputColumn').val();
                var butWidth = $('#inputWidth').val();
                var butHeigth = $('#inputHeigth').val();
                var butClick = $('#inputClick').val();

                but.type = 'button';
                but.value = butValue;
                but.className = butClass;
                but.style.width = butWidth;
                but.style.height = butHeigth;
                //but.onclick = butClick;

                for (var i = 0; i < 17; i++) {
                    mainArr[butRow] = [];
                    for (var j = 0; j < 17; j++) {
                        mainArr[butRow][butColumn] = but;

                    }
                }

});

Answer 1

you have an error in the code - you use:

mainArr[butRow][butColumn] = but;

where butRowand butColumndoes not change

this should fix your problem:

for (var i = 0; i < 17; i++) {
    mainArr[i] = [];
    for (var j = 0; j < 17; j++) {
        var but = document.createElement("input");
        but.type = 'button';
        but.value = butValue;
        but.className = butClass;
        but.style.width = butWidth;
        but.style.height = butHeigth;
        mainArr[i][j] = but;
    }
}