Create two arrays duplicate code

Question

I wrote two functions that creates two 2 dimensional arrays, but there is a lot of duplicate code and I don't know how to split it in one function. Is it even possible? I know the rule don't repeat yourself but I don't know how to use it because I learn javascript and programming. Also do you recommended books to learn how to write clean code.

First function

function createMatrixA() {

    var i, j;
    var htmlElements = "";
    var matrixWidth = parseInt(document.getElementById("matrix-width-a").value, 10);
    var matrixHeight = parseInt(document.getElementById("matrix-height-a").value, 10);

    if (matrixWidth <= 7 && matrixHeight <= 7) {
        matrixA = new Array(matrixHeight);
        for (i = 0; i < matrixA.length; i++) {
            matrixA[i] = new Array(matrixWidth);
        }
        for (i = 0; i < matrixA.length; i++) {
            htmlElements += "<div>";
            for (j = 0; j < matrixA[i].length; j++) {
                matrixA[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"a" + (i + 1) + (j + 1) + "\" placeholder=\"a" + (i + 1) + (j + 1) + "\" ></div>";
                htmlElements += matrixA[i][j];
            }
            htmlElements += "</div>";
        }
        document.getElementById("matrix-a").innerHTML = htmlElements;
    } else {
        document.getElementById("matrix-a").innerHTML = "<p>Maximum matrix size is 7x7.</p>";
    }
}

Second function

function createMatrixB() {
    var i, j;
    var htmlElements = "";
    var matrixWidth = parseInt(document.getElementById("matrix-width-b").value, 10);
    var matrixHeight = parseInt(document.getElementById("matrix-height-b").value, 10);

    if (matrixWidth <= 7 && matrixHeight <= 7) {
        matrixB = new Array(matrixHeight);
        for (i = 0; i < matrixB.length; i++) {
            matrixB[i] = new Array(matrixWidth);
        }
        for (i = 0; i < matrixB.length; i++) {
            htmlElements += "<div>";
            for (j = 0; j < matrixB[i].length; j++) {
                matrixB[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"b" + (i + 1) + (j + 1) + "\" placeholder=\"b" + (i + 1) + (j + 1) + "\" ></div>";
                htmlElements += matrixB[i][j];
            }
            htmlElements += "</div>";
        }
        document.getElementById("matrix-b").innerHTML = htmlElements;
    } else {
        document.getElementById("matrix-b").innerHTML = "<p>Maximum matrix size is 7x7.</p>";
    }
}

Answer 1

compare the difference and extract the differences into parameters. you can look at this.

function createMatrix(domId) {
    var i, j;
    var htmlElements = "";
    var matrixWidth = parseInt(document.getElementById(domId).value, 10);
    var matrixHeight = parseInt(document.getElementById(domId).value, 10);

    if (matrixWidth <= 7 && matrixHeight <= 7) {
        matrix = new Array(matrixHeight);
        for (i = 0; i < matrix.length; i++) {
            matrix[i] = new Array(matrixWidth);
        }
        for (i = 0; i < matrix.length; i++) {
            htmlElements += "<div>";
            for (j = 0; j < matrix[i].length; j++) {
                matrix[i][j] = "<div class=\"input-kontener\"><input type=\"number\" class=\"form-control\" id=\"b" + (i + 1) + (j + 1) + "\" placeholder=\"b" + (i + 1) + (j + 1) + "\" ></div>";
                htmlElements += matrix[i][j];
            }
            htmlElements += "</div>";
        }
        document.getElementById(domId).innerHTML = htmlElements;
    } else {
        document.getElementById(domId).innerHTML = "<p>Maximum matrix size is 7x7.</p>";
    }
}

createMatrix('matrix-width-a');
createMatrix('matrix-width-b');