Corso recupero jacascript lezione 17

<!DOCTYPE html>
<!-- NOTA: tutti gli elementi dell'interfaccia dovranno essere inseriti
 dinamicamente via codice alla partenza della pagina.

Alla partenza la pagina deve presentare l'interfaccia minima necessaria
a creare una tabella; una prima drop down list consente di scegliere un
valore tra 1 e 100 (il numero delle righe che dovra avere la tabella);
l'altra un valore da 1 a 20 (il numero delle colonne);
la creazione della tabella avverrà facendo click su un bottone. -->

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    table {border-collapse: collapse;}
    tr, td {border: solid blue 2px;}
    td {width: 100px; height: 30px;}
  </style>
</head>
<body>
  <script>

    function generaSelect(num_righe)
    {
      let drop = document.createElement("select");

      for (let r=1; r<=num_righe; r++)
      { let opzione = document.createElement("option");
        opzione.setAttribute("value", r);
        opzione.innerText = r;
        drop.insertAdjacentElement("beforeEnd", opzione);
      }
      return drop;
    }

    //generazione delle due drop downlist
    const num_righe = 100, num_colonne=20;

    let drop1 = generaSelect(num_righe);
    let drop2 = generaSelect(num_colonne);

    document.body.insertAdjacentElement("beforeEnd", drop1 );
    document.body.insertAdjacentElement("beforeend", drop2);

    //generazione del bottone
    let bottone = document.createElement("button");
    bottone.innerText = "GENERA TABELLA";
    document.body.insertAdjacentElement("beforeEnd", bottone);

    //let tabella = null;

    bottone.addEventListener("click", function() {

    let vecchia_tabella = document.querySelector("table");
    if (vecchia_tabella!==null)  vecchia_tabella.remove();

    let tabella = document.createElement("table");

     let quante_righe = parseInt(drop1.value); //prima drop down
     let quante_colonne = parseInt(drop2.value); //seconda drop down

     for (let r=0; r<quante_righe; r++)
     {
       let tr = document.createElement("tr");

       for (let c=0; c<quante_colonne; c++)
       {
         let td = document.createElement("td");
         tr.appendChild(td)
       }

       tabella.appendChild(tr);
     }
     document.body.insertAdjacentElement("beforeEnd", tabella);

     })
  </script>
</body>
</html>