Javascript 为什么我的输入字段被重置？

我对Javascript有问题，甚至可能是html

我有一个代码如下所示：

function tafelToetsen() {
  tafel = document.getElementById('tafelToetsen').value;
  if (tafel != "") {
    document.getElementById('response').innerHTML=("<table id='table' border='1' onload='dyslectie();'><th colspan='2'>Dit is de tafel van " + tafel + "</th></table>");
    for (i = 1; i < 11; i++) {
      antwoorden[i] = i * tafel;
      document.getElementById('table').innerHTML+=("<tr><td>" + i + " x " + tafel + " =</td><td><input type='text' id='tafel" + i + "' required></td></tr>");
    }

    document.getElementById('table').innerHTML+=("<button onclick='checkToets()'>Check toets</button>");
  } else {
    document.getElementById('response').innerHTML=("Kies je tafel<br/>");
    document.getElementById('table').innerHTML+=("<button onclick='checkToets()'>Check toets</button>")
  }
}


// Tafels checken

function checkToets() {
  var naam = document.getElementById('naams').value;

  o = 0;
  v = 0;
  antwoorden[i] = i * tafel;
  for (i = 1; i < antwoorden.length; i++) {
    if ($("#tafel" + i).val() == "" || $("#tafel" + i).val() == null) {
      break;
    } 
    else if (antwoorden[i] != $("#tafel" + i).val()) {
      o++;
    } 
    else {
      v++;
    }
  }

  document.getElementById('response').innerHTML+= "";
  if ((v + o) != 10) {
    document.getElementById('response').innerHTML=("<p id='onvoldoende' style='color:red;'>Je hebt nog niet alles ingevuld," + naam + '.');
  } 
    else if (v == 1) {
    document.getElementById('response').innerHTML=("Je hebt een 1, " + naam + ", dat moet je zeker verbeteren!");
  }
  else if (v == 2) {
    document.getElementById('response').innerHTML=("Je hebt een 2, " + naam + ", dat moet je zeker verbeteren!");
  }
  else if (v == 3) {
    document.getElementById('response').innerHTML=("Je hebt een 3, " + naam + ", dat moet je zeker verbeteren!");
  }
  else if (v == 4) {
    document.getElementById('response').innerHTML=("Je hebt een 4, " + naam + ", dat moet je zeker verbeteren!");
  }
  else if (v == 5) {
    document.getElementById('response').innerHTML=("Je hebt een 5,  " + naam + ", een 6 is een voldoende!</p>");
  }
  else if (v == 6) {
    document.getElementById('response').innerHTML=("<p id='voldoende'>Je hebt een 6, " + naam + ", je hebt NET een voldoende! Oefen meer!");
  }
  else if (v == 7) {
    document.getElementById('response').innerHTML=("Je hebt een 7, " + naam + ", je hebt een ruimvoldoende! We gaan voor de 10!");
  }
  else if (v == 8) {
    document.getElementById('response').innerHTML=("Je hebt een 8 gehaald, " + naam + ", zeer goed! Bij de 10 krijg je een certificaat!");
  }
  else if (v == 9) {
    document.getElementById('response').innerHTML=("Je hebt een 9 gehaald, " + naam + ", zeer goed! Bijna een 10, dan krijg je een certificaat!");
  }
  else if (v == 10) {
    document.getElementById('response').innerHTML+=("Je hebt alles goed! Goedzo, " + naam + "</p>. <button>Print certificaat!</button>");
  }



}

函数checkToets检查输入字段的正确答案，然后他写了一行html:innerhtml

但是每当我点击按钮，输入字段就会被重置。。 在internet上搜索了一个小时以寻找解决方案，但找不到正确答案

---

我真的很感谢任何人帮我解决这个新问题：

将type=按钮添加到您的中，以确保它不会提交您的表单。请尝试event.preventDefault；我如何使用>@Anonymous.Xchange函数checkToets{来函数checkToetsevent{，然后在var naam=document.getElementById'naams.value之前插入event.preventDefault；我这样做了，但是我的innerhtml文本不会显示出来。@Anonymous.X