Question

我遇到了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 ...

但每当我点击按钮时，输入字段都会重置。在互联网上搜索了一个小时的解决方案，但找不到正确答案..

从那以后我仍然没有任何问题...请帮助我摆脱这个地狱： - ）

请求它的html：

<!doctype html>
<html lang="nl" ng-app>

<head>
  <meta charset="UTF-8">
  <title>Tafels Toetsen | Tayfun Kayahan</title>
  <link rel="stylesheet" href="css/style.css">
  <meta name="viewport" content="width=device-width; initial-scale=1.0">
  <link rel="shortcut icon" type="image/x-icon" href="images/favicone.ico">
</head>

<body onload="msieversion();">
    <Header>
        <a href="index.html"><img src="images/logo.png" id="logo"></a>

        <nav id="navigatie">

        <ul>
            <li id="toetsen">
                <a href="#">TAFELS TOETSEN</a>  

            </li>
            <li id="oefenen">
                <a href="oefenen.html">TAFELS OEFENEN</a>
            </li>
            <li>
                <a href="over.html">CONTACT</a>
            </li>
        </ul>
        </nav>
        <img src="images/d.png" id="d" onclick="dyslectie()">

        <p id="dys">Dyslexie</p>
    </Header>
<div id="toetsen">
    <h2>Tafels Toetsen</h2>
    <label id="naamask">Wat is je naam?                </label>
        <input type="text" id="naams" ng-model='naams'><br/>
    <label>Kies je tafel:                </label>
<select name="tafelToetsen" id="tafelToetsen" ng-model='select' type='select'>
      <option value="">Kies een Tafel</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
      <option value="7">7</option>
      <option value="8">8</option>
      <option value="9">9</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
      <option value="13">13</option>
</select>
    <button id="toetsbutton" type="button" onclick="tafelToetsen()" style="margin-left:3.65%;">Toets de tafel {{ select }}</button><br/>

    <label for="Tafel">Kies je tafel boven de 13:</label>
    <input type="text" name="tafel" id="tafele" ng-model="antwoord">
    <button onclick="expert()">Toets de tafel {{ antwoord }}</button>
</div>
    <div id="response"></div>
    <div id="uitkomst"></div>
<div id="footert">
    <footer>
        <ul>
            <li>
                <a href="#">Twitter</a>
            </li>
            <li>
                 <a href="#">Facebook</a>
            </li>
        </ul>
            <span class="copy">&copy;2014 <a href="http://www.tkayahan.ict-idcollege.nl/niemandtafels">Wonder<span class="red">S</span><span class="green">Q</span><span class="black">o</span><span class="pink">o</span>l</a>
</footer>
</div>


  <!-- scripts -->
  <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
  <script src="javascript/script.js"></script>
  <script src="javascript/ie.js"></script>
  <script src="javascript/angular.min.js"></script>
</body>

</html>

Answer 1

这是checkToets（）函数中正在重置输入的行。它用相同的结构替换现有的html，减去你的输入，但添加一个空字符串。

document.getElementById('response').innerHTML+= "";

为什么输入字段会重置

1 个答案: