Reset page through reset button

Asked

Viewed 1,099 times

2

I have a very simple problem, but as I am a beginner in javascript I am not able to do.

with this code, and I need to create a function that restores the page without reloading it, who can help I thank you. 

var tabela = "";
var t = 0;

for (var i = 0; i < 10; i++) {
  tabela += "<tr>";
  for (var j = 0; j < 10; j++) {
    tabela += "<td>" + t + "</td>";
    t++;
  }
  tabela += "</tr>";
}
document.getElementById("numeros").innerHTML = tabela;

var num = [];

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  var lim = document.getElementById("id1").value;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      tratarNumero(this);
    }
  };
  xhttp.open("GET", "http://stutz.000webhostapp.com/php/sorteio.php", true);
  if (num.length < lim) {
    xhttp.send();
  } else {
    document.getElementById("sorteio").innerHTML += "<br> Fim do sorteio - Máximo de " + lim + " números.";
    document.getElementById("id2").disabled = true;
  }

}

function tratarNumero(response) {
  var sorteado = response.responseText;
  console.log(response.responseText);
  var unico = true;
  var k = 0;
  var table = "";
  var tem = true;

  for (var n of num) {
    if (n == sorteado) {
      unico = false;
    }
  }
  if (unico) {
    num.push(sorteado);
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado;

    for (var i = 0; i < 10; i++) {
      table += "<tr>";
      for (var j = 0; j < 10; j++) {
        for (var p of num) {
          if (k == p) {
            tem = true;
            break;
          } else {
            tem = false;
          }
        }

        if (tem) {
          table += "<td> <mark>" + k + "</mark> </td>";
          k++;
        } else {
          table += "<td>" + k + "</td>";
          k++;
        }

      }
      table += "</tr>";

    }


    document.getElementById("numeros").innerHTML = table;

  } else {
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado + "(repetido)";
  }
}

function myFunction() {
  document.getElementById("myForm").reset();
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
<html>

<body>
  <h2>Loteria AJAX - PLUS</h2><br> Quantidade de números: <input type="text" id="id1" value="3">
  <br><button type="button" id="id2" onclick="loadDoc();">Sortear</button> <button type="reset" onclick="myFunction();" value="Reset">Reset</button>
  <br><br> Resultado:
  <br>
  <table id="numeros"></table>
  <br> Status do sorteio:
  <p id="sorteio"></p>
</body>

</html>

javascript html

  • What do you mean exactly co reset? and why refresh is not an option?

  • type when the user click the reset button the page has to look as if it was from the beginning without the table coloring and the empty input these things

  • Has <form> or HTML is exactly as it is in the question?

  • has the form in html

  • No, if you have the <form> form tag?

  • has, just like this in the code

Show 1 more comment

2 answers

1


Do the following: create a function that builds the table instead of leaving the code loose. So the variables tabela and t only have scope within what they will be used and you can rebuild the table by calling the function. And run the function by calling it by criaTab():

function criaTab(){
   var tabela = "";
   var t = 0;

   for (var i = 0; i < 10; i++) {
     tabela += "<tr>";
     for (var j = 0; j < 10; j++) {
       tabela += "<td>" + t + "</td>";
       t++;
     }
     tabela += "</tr>";
   }
   document.getElementById("numeros").innerHTML = tabela;
}
criaTab(); // executa a função

In function myFunction() you clean the input, empties the div #sorteio, enable the button #id2, empty the array num[] and calls the function criaTab() to go back to the table from scratch:

function myFunction() {
   document.getElementById("id1").value = '';
   document.getElementById("sorteio").innerHTML = '';
   document.getElementById("id2").disabled = false;
   num = [];
   criaTab();
}

With these changes everything returns as at the beginning:

function criaTab(){
   var tabela = "";
   var t = 0;
   
   for (var i = 0; i < 10; i++) {
     tabela += "<tr>";
     for (var j = 0; j < 10; j++) {
       tabela += "<td>" + t + "</td>";
       t++;
     }
     tabela += "</tr>";
   }
   document.getElementById("numeros").innerHTML = tabela;
}
criaTab();

var num = [];

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  var lim = document.getElementById("id1").value;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      tratarNumero(this);
    }
  };
  xhttp.open("GET", "http://stutz.000webhostapp.com/php/sorteio.php", true);
  if (num.length < lim) {
    xhttp.send();
  } else {
    document.getElementById("sorteio").innerHTML += "<br> Fim do sorteio - Máximo de " + lim + " números.";
    document.getElementById("id2").disabled = true;
  }

}

function tratarNumero(response) {
  var sorteado = response.responseText;
  console.log(response.responseText);
  var unico = true;
  var k = 0;
  var table = "";
  var tem = true;

  for (var n of num) {
    if (n == sorteado) {
      unico = false;
    }
  }
  if (unico) {
    num.push(sorteado);
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado;

    for (var i = 0; i < 10; i++) {
      table += "<tr>";
      for (var j = 0; j < 10; j++) {
        for (var p of num) {
          if (k == p) {
            tem = true;
            break;
          } else {
            tem = false;
          }
        }

        if (tem) {
          table += "<td> <mark>" + k + "</mark> </td>";
          k++;
        } else {
          table += "<td>" + k + "</td>";
          k++;
        }

      }
      table += "</tr>";

    }


    document.getElementById("numeros").innerHTML = table;

  } else {
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado + "(repetido)";
  }
}

function myFunction() {
   document.getElementById("id1").value = '';
   document.getElementById("sorteio").innerHTML = '';
   document.getElementById("id2").disabled = false;
   num = [];
   criaTab();
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
<h2>Loteria AJAX - PLUS</h2><br> Quantidade de números: <input type="text" id="id1" value="3">
  <br><button type="button" id="id2" onclick="loadDoc();">Sortear</button> <button onclick="myFunction();" value="Reset">Reset</button>
  <br><br> Resultado:
  <br>
  <table id="numeros"></table>
  <br> Status do sorteio:
  <p id="sorteio"></p>

Option 2

Without creating function criaTab(), you can simply remove the tags <mark> of the numbers with a loop for. Just search the table td that have this tag and replace the HTML with the value found:

var tabela = "";
var t = 0;

for (var i = 0; i < 10; i++) {
  tabela += "<tr>";
  for (var j = 0; j < 10; j++) {
    tabela += "<td>" + t + "</td>";
    t++;
  }
  tabela += "</tr>";
}
document.getElementById("numeros").innerHTML = tabela;

var num = [];

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  var lim = document.getElementById("id1").value;
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      tratarNumero(this);
    }
  };
  xhttp.open("GET", "http://stutz.000webhostapp.com/php/sorteio.php", true);
  if (num.length < lim) {
    xhttp.send();
  } else {
    document.getElementById("sorteio").innerHTML += "<br> Fim do sorteio - Máximo de " + lim + " números.";
    document.getElementById("id2").disabled = true;
  }

}

function tratarNumero(response) {
  var sorteado = response.responseText;
  console.log(response.responseText);
  var unico = true;
  var k = 0;
  var table = "";
  var tem = true;

  for (var n of num) {
    if (n == sorteado) {
      unico = false;
    }
  }
  if (unico) {
    num.push(sorteado);
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado;

    for (var i = 0; i < 10; i++) {
      table += "<tr>";
      for (var j = 0; j < 10; j++) {
        for (var p of num) {
          if (k == p) {
            tem = true;
            break;
          } else {
            tem = false;
          }
        }

        if (tem) {
          table += "<td> <mark>" + k + "</mark> </td>";
          k++;
        } else {
          table += "<td>" + k + "</td>";
          k++;
        }

      }
      table += "</tr>";

    }


    document.getElementById("numeros").innerHTML = table;

  } else {
    document.getElementById("sorteio").innerHTML += "<br>" + num.length + "º Número sorteado:" + sorteado + "(repetido)";
  }
}

function myFunction() {
   var marks = document.querySelectorAll("#numeros td mark");
   for(var x=0; x<marks.length; x++){
      var v = marks[x].textContent;
      marks[x].parentNode.innerHTML = v;
   }
   document.getElementById("id1").value = '';
   document.getElementById("sorteio").innerHTML = '';
   document.getElementById("id2").disabled = false;
   num = [];
}
table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
}
 <h2>Loteria AJAX - PLUS</h2><br> Quantidade de números: <input type="text" id="id1" value="3">
  <br><button type="button" id="id2" onclick="loadDoc();">Sortear</button> <button onclick="myFunction();" value="Reset">Reset</button>
  <br><br> Resultado:
  <br>
  <table id="numeros"></table>
  <br> Status do sorteio:
  <p id="sorteio"></p>

  • I’ll test you here and return you

  • I tested here, there is only one problem I need the table to be fixed, IE if it is in a function it will only appear if the function is triggered

  • It still works, and it’s even better to avoid global variables. The function serves to make things easier and you can call her whenever you want. With the code loose, you can’t run that code again.

  • Okay, I put a second option without rebuilding the table.

  • Brother Brigadão msm

  • was desperate to do this is for a job vlw msm

  • I’m talking! Welcome to Stack.

Show 2 more comments

0

Dude,

First you need to put the buttons and fields in a form. Then you can inside the put function:

 event.preventDefault(); previne o comportamento de refresh da tela
 form.reset(); //limpa o form

  • I put that you said, only only the input reset

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.