2

To com um problema bem simples, mas como sou iniciante em javascript não estou conseguindo fazer.

to com esse código, e preciso criar uma função que resete a página sem recarregar ela, quem puder ajudar eu agradeço.

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>

6
  • O que você quer dizer exatamente co resetar? e porque o refresh não é uma opção? Commented 25/09/2018 às 21:00
  • tipo quando o usuario clicar no botão reset a página tem que ficar como se estivesse do inicio sem a coloração da tabela e o input vazio essas coisas
    – user126232
    Commented 25/09/2018 às 21:04
  • Tem <form> ou o HTML é exatamente como está na pergunta?
    – Sam
    Commented 25/09/2018 às 21:25
  • tem o form no html
    – user126232
    Commented 25/09/2018 às 21:26
  • Não, se tem a tag <form> de formulário?
    – Sam
    Commented 25/09/2018 às 21:28

2 Respostas 2

1

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>

7
  • vo testa aqui e te retorno
    – user126232
    Commented 25/09/2018 às 21:40
  • testei aqui, só tem um problema eu preciso que a tabela fique fixa, ou seja caso esteja em uma função ela só vai aparecer caso a função seja acionada
    – user126232
    Commented 25/09/2018 às 21:47
  • Dá na mesma, e é até melhor evitar variáveis globais. A função serve pra facilitar as coisas e vc pode chamar ela quando quiser. Com o código solto, vc não tem como executar aquele código novamente.
    – Sam
    Commented 25/09/2018 às 21:50
  • Pronto, coloquei uma segunda opção sem reconstruir a tabela.
    – Sam
    Commented 25/09/2018 às 22:07
  • mano brigadão msm
    – user126232
    Commented 25/09/2018 às 22:08
0

Cara,

Primeiro você precisa colocar os botões e os campos em um form. Depois você pode dentro da função colocar:

 event.preventDefault(); previne o comportamento de refresh da tela
 form.reset(); //limpa o form
1
  • coloquei isso que você falou, só que só o input resetou
    – user126232
    Commented 25/09/2018 às 21:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .