Faz o seguinte: crie uma função que constrói a tabela em vez de deixar o código solto. Assim as variáveis tabela
e t
só terão escopo dentro do que elas vão ser usadas e você pode reconstruir a tabela bastando chamar a função. E execute a função chamando-a por 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
Na função myFunction()
você limpa o input
, esvazia a div #sorteio
, habilita o botão #id2
, esvazia a array num[]
e chama a função criaTab()
para voltar a tabela do zero:
function myFunction() {
document.getElementById("id1").value = '';
document.getElementById("sorteio").innerHTML = '';
document.getElementById("id2").disabled = false;
num = [];
criaTab();
}
Com essas alterações tudo volta como no início:
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>
Opção 2
Sem criar função criaTab()
, você pode simplesmente remover as tags <mark>
dos números com um laço for
. Basta buscar na tabela as td
que possuem essa tag e substituir o HTML pelo valor encontrado:
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>
<form>
ou o HTML é exatamente como está na pergunta?