Как сделать, чтобы цикл больше не повторялся до перезагрузки страницы?

Question

У меня есть двумерный массив, я вывожу его в таблицу через кнопку, но если постоянно жмакать кнопку, то будет создаваться каждый раз новый массив и добавляться на страницу в виде новой таблицы.. Как итог: бардак на страничке.. Есть ли какой - то способ, который будет каждый раз менять эту таблицу, Но не создавать новую?

function pyatoe() 
{
    let table = document.createElement("TABLE")
let tableBody = document.createElement("TBODY")
table.appendChild(tableBody)
 var ma=10;
var mi=-10;
var dvmas = [
[Math.floor(Math.random()*(ma-mi)), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi)],
[Math.floor(Math.random()*(ma-mi)), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi)],
[Math.floor(Math.random()*(ma-mi)), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi)],
[Math.floor(Math.random()*(ma-mi)), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi), Math.floor(Math.random()*ma-mi)]
];
for (let i = 0; i < dvmas.length; i++) 
    {   
  let tr = document.createElement("TR")
  tableBody.appendChild(tr); 
            {
    for (let j = 0; j < dvmas[i].length; j++) 
    {
      let td = document.createElement("TD")
      td.innerHTML = dvmas[i][j];
      tr.appendChild(td)
    }
            }
    }
document.body.appendChild(table)
[...table.children].forEach(children => children.remove());
console.log(dvmas)
}

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<label id="bl">Массив MxN: </label>
 <button onclick="pyatoe()">Создать</button>
 <div id="masdv">Массив:

Answer 1

Я добавил в верстку пустую таблицу, что бы её не создавать в Javascript.

Код

 let tableBody = document.querySelector('.mytable tbody');

ищет эту таблицу вместо создания.

Еще я заменил Math.floor() на ~~, так выглядит нагляднее.

function pyatoe() 
{
    let tableBody = document.querySelector('.mytable tbody');
    [...tableBody.children].forEach(children => children.remove());
 var ma=10;
var mi=-10;
var dvmas = [
[~~(Math.random()*(ma-mi)), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi)],
[~~(Math.random()*(ma-mi)), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi)],
[~~(Math.random()*(ma-mi)), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi)],
[~~(Math.random()*(ma-mi)), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi), ~~(Math.random()*ma-mi)]
];
for (let i = 0; i < dvmas.length; i++) 
    {   
  let tr = document.createElement("TR")
  tableBody.appendChild(tr); 
            {
    for (let j = 0; j < dvmas[i].length; j++) 
    {
      let td = document.createElement("TD")
      td.innerHTML = dvmas[i][j];
      tr.appendChild(td)
    }
            }
    }
   // console.log(dvmas)
}

table,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

<label id="bl">Массив MxN: </label>
 <button onclick="pyatoe()">Создать</button>
 <div id="masdv">Массив:</div>
 <table class="mytable">
 <tbody>
 </tbody>
 </table>

БЛОГ НА HUSL

Как сделать, чтобы цикл больше не повторялся до перезагрузки страницы?

Ответы (1 шт):