2
\$\begingroup\$

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>";
    }
}
\$\endgroup\$

1 Answer 1

1
\$\begingroup\$

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');
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.