Reset page by reset button

Question

Reset page by reset button

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

I have a very simple problem, but since I'm a beginner in javascript I can not do it.

With this code, I need to create a function that resets the page without reloading it, whoever can help I thank.

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

asked by anonymous 25.09.2018 / 22:50

2 answers

0

Dude,

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

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

25.09.2018 / 23:07

Move multiple messages to a folder using JavaMail Handling Objects in Session

score 1 · Accepted Answer

It does the following: create a function that constructs the table instead of leaving the code loose. So the variables tabela and t will only be scoped within what they will be used and you can rebuild the table just by calling the function. And run the function by calling it 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 myFunction() you clear input , empty div #sorteio , enable #id2 , empty array num[] and call function criaTab() to return to table zero:

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

With these changes everything goes back to 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 criaTab() function, you can simply remove the <mark> tags from the numbers with a for loop. Just look at the table with the 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>