Generate a X number of elements after click

Question

I'm doing a script, that when clicking, first check if the generated number is in the range, then, if it is in that range, generate a certain checkbox, the problem that I have is that after clicking, or only generates 1 item or does not show anything

This is the way I'm testing now

       var count=30;
    var counter=setInterval(timer, 1000);
    function timer(){
      count=count-1;
        if(count <= 0){
          clearInterval(counter);
          return;
          checker();
        }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

    function start(){
      var timeLeft = 30;
      var x = document.getElementById("invisible");
      var matriu = document.getElementById("Matriu").value;
      var btn = document.createElement("INPUT");
      btn.type = "checkbox";
      btn.id = "test";
      if(matriu >= 1 && matriu <= 10){
        if (x.style.display === "block") {
          timer();
          x.style.display = "none";
      } else {
          x.style.display = "block";
      }
      } else {
        alert("Error, numero incorrecte");
      }   alert(matriu);
      for ( i=0; i <= matriu; i++) {
        document.getElementById("invisible").appendChild(btn);
      }
    }
    function checker() {
      for (z = 1; z<3; z++) {
  document.getElementById('test'+z).checked = true;
}
   };

#invisible{
  display: none;
}

 

   <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Exercici 1</title>
      </head>
      <body>
            Matriu:<input type="text" id="Matriu">
   <input type="button" onclick="start()" value="começa">
  <div id="invisible"> 
    <h3>Nivell X</h3> 
    <span id="timer"></span>
    <br>
  </div>
      </body>
    </html>

Where's your container in the HTML? I don't see any element with `id="container"` — Ben Kolya Mansley, Jan 26 '18 at 18:24
Sorry, im making changes and trying my best @BenKolyaMansley — Nicole, Jan 26 '18 at 18:31

score 0 · Answer 1 · answered Jan 26 '18 at 18:48

There's some things I'd recommend for cleaning this up, but for just getting it to do what you're asking, try this:

function start() {
    var x = document.getElementById("invisible");
    var matriu = document.getElementById("Matriu").value;

    if (matriu >= 1 && matriu <= 10) {
      x.style.display = x.style.display === "block" ? "none" : "block";
    } else {
      alert("Error, numero incorrecte");
    }   
    alert(matriu);

    for (var i = 0; i < matriu; i++) {
      var btn = document.createElement("input");
      document.body.appendChild(btn);
    }

}

That's okay! You cleaned it up nicely – Aystub Jan 26 '18 at 19:04 — Aystub, Jan 26 '18 at 19:04

Generate a X number of elements after click

1 Answers1