JSFiddle - React, Tailwind, and code Playground

by MariusNastasa

HTML

<h1>Citirea primei matrici</h1>
Linii : <input type="number" id="row-number">
Coloane : <input type="number" id="col-number"><br>
<button onclick="initMatrix()">Initializare</button>
<hr>
Afisare matrice: <div id="display-matrix"></div>
<hr>
<input type="number" id="number"/>
<button onclick="readNumber()">Add number</button>
<hr>

JavaScript

var matrix = [];
var matrixCols;
var matrixRows;

var rowPos = 0;
var colPos = 0;

function initMatrix() {
 	matrixRows = Number(document.getElementById("row-number").value);
  matrixCols = Number(document.getElementById("col-number").value);

	// initializare
	initAndDisplayMatrix(matrixRows, matrixCols);
  
  // afisare
  initAndDisplayMatrix(matrixRows, matrixCols, false);
}

function initAndDisplayMatrix(matrixRows, matrixCols, init=true) {
  var formatMatrix = "";
  for (var i = 0; i < matrixRows; i++) {
  	for (var j = 0; j < matrixCols; j++) {
    	if (j == 0) {
      	if (init) {
      		matrix[i] = [];
        } else {
        	formatMatrix += "<br>";
        }
      }
    	if (init) {
      	matrix[i].push("-");
      } else {
     		formatMatrix += matrix[i][j];
      }
    }
  }
  document.getElementById("display-matrix").innerHTML = formatMatrix;
}

function readNumber() {
	var number = Number(document.getElementById("number").value); 
  
  matrix[rowPos][colPos++] = number;
  
  if (colPos == matrixCols) {
  	colPos = 0;
    rowPos++;
  }
 
  // afisare
  initAndDisplayMatrix(matrixRows, matrixCols, false);
 }