Question

我的功能有问题，在this fiddle

window.addEventListener("load", init, false);

function init() {
  let naam = document.getElementById("naam").addEventListener("blur", checkNaam, false);
  let startKnop = document.getElementsByTagName("button")[0].addEventListener("click", startClicked, false);
}

function checkNaam(event) {
  const regEX = /^\d[A-Z]{2}\d{1,}K$/;
  let naam = document.getElementById("naam");
  let knop = document.getElementsByTagName("button")[0];

  if (regEX.test(naam.value)) {
    knop.removeAttribute("disabled");
    knop.setAttribute("enable");
  }
}

function startClicked(event) {
  let knop2 = document.getElementById("keuze1");
  knop2.removeAttribute("disabled");

  let knop3 = document.getElementById("keuze2");
  knop3.removeAttribute("disabled");

  toonVraag();
}

function toonVraag(event) {
  let vraag = document.getElementById('vraag');
  vraag.innerHTML = "Hallo";

}

body {
  font-family: sans-serif;
  font-size: large;
}

form {
  text-align: center;
}

button {
  width: 300px;
  height: 100px;
  font-size: large;
}

form div {
  margin: 2em;
}

#verslag {
  display: none;
  position: absolute;
  top: 100px;
  left: 100px;
  background-color: lightgray;
  opacity: 0.9;
  padding: 3em;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Examen p5</title>
  <script src="scripts/examen.js.pdf.js"></script>
  <script src="scripts/afblijven.js"></script>
  <link rel="stylesheet" href="style/style.css">
</head>

<body>
  <form>
    <div>
      <h1>Enquêtetool</h1>
      <p>Geef eerst een correcte code in: start met een cijfer, dan 2 hoofdletters, vervolgens 1 of meerdere cijfers en de code eindigt met een K. Druk dan op start om de enquête te starten...</p>
      <label for="naam">Code: </label><input type="text" id="naam" />
    </div>
    <button disabled>Start</button>
    <div>
      <p id="vraag">Een vraag</p>
      <button id="keuze1" disabled>Keuze1</button>
      <button id="keuze2" disabled>Keuze2</button>
    </div>
  </form>
  <section id="verslag">
    <h1>Overzicht antwoorden</h1>
    <table>

    </table>
  </section>
</body>

</html>

您必须输入的代码是

1KK1K

我的问题是一旦调用了侦听器处理程序：

function startClicked(event) {
    let knop2 = document.getElementById("keuze1");
    knop2.removeAttribute("disabled");

    let knop3 = document.getElementById("keuze2");
    knop3.removeAttribute("disabled");

    toonVraag();
}

它会自动刷新页面（返回默认值）。

注意：我无法直接更改HTML，需要通过JavaScript。

Answer 1

按钮元素就好像它是一个表单一样，所以刷新它。

您可以在JavaScript或HTML中修复它：

JavaScript的：

将event.preventDefault()添加到按钮处理程序的开头，以停止按钮执行“默认操作”，或

HTML：

将type="button"添加到HTML中的按钮，因为it defaults as a 'submit'

https://jsfiddle.net/g1Ljjgc7/2/是您小提琴的更新版本。

单击附加了事件侦听器的按钮元素刷新页面

1 个答案: