个性测验-无线电类型和价值

Question

我正在尝试使用 javascript（没有 jquery）在 HTML 中进行个性测验，但我不知道我的问题出在哪里。

我知道我需要把 return false 但我不知道是

不知道怎么用好值

function count() {

  var first = document.querySelector('input[name=first]').value;

  var second = document.querySelector('input[name=second]').value;

  var dps = 0;

  var tank = 0;

  var sup = 0;

  if (first == 'dps') {

    dps++;

  }

  if (first == 'tank') {

    tank++;

  }

  if (first == 'sup') {

    sup++;

  }

  if (second == 'dps') {

    dps++;

  }

  if (second == 'tank') {

    tank++;

  }

  if (second == 'sup') {

    sup++;

  }

  var count2;

  if (dps > tank && dps > sup) {

    count2 = "dps";

  }

  if (tank > dps && tank > sup) {

    count2 = "tank";

  }

  if (sup > dps && sup > tank) {

    count2 = "sup";

  }

  var result = document.getElementById("motek");

  result.innerText = count2;

}

<form id='hello' onsubmit="count()">

  <h3>what your favorite food?</h3>

  <input type="radio" name="first" value="tank">hghjghj<br>

  <input type="radio" name="first" value="dps">hghjfgsfghj<br>

  <input type="radio" name="first" value="sup">hghsgdsdqqwj<br>

  <h3>what your favoritsfde food?</h3>

  <input type="radio" name="second" value="tank">hghfsghj<br>

  <input type="radio" name="second" value="dps">hghesfghj<br>

  <input type="radio" name="second" value="sup">hghsfdqwj<br>

  <input type="submit" value="submit">

</form>

<div id="motek">

</div>

Answer 1

您需要停止重新加载页面。使用表单提交时防止重新加载页面的一种好方法是添加return false您的onsubmit属性。在纯 Javascript 中，您还可以使用： e.preventDefault()或者您可以将您的<button type="button">Submit</button>类型设置为按钮并通过单击此按钮手动处理表单提交。下面的片段显示了return false方法。function count() {&nbsp; var first = document.querySelector('input[name="first"]:checked').value;&nbsp; var second = document.querySelector('input[name="second"]:checked').value;&nbsp;&nbsp;&nbsp; var dps = 0;&nbsp; var tank = 0;&nbsp; var sup = 0;&nbsp; if (first == 'dps') {&nbsp; &nbsp; dps++;&nbsp; }&nbsp; if (first == 'tank') {&nbsp; &nbsp; tank++;&nbsp; }&nbsp;&nbsp;&nbsp; if (first == 'sup') {&nbsp; &nbsp; sup++;&nbsp; }&nbsp;&nbsp;&nbsp; if (second == 'dps') {&nbsp; &nbsp; dps++;&nbsp; }&nbsp; if (second == 'tank') {&nbsp; &nbsp; tank++;&nbsp; }&nbsp;&nbsp;&nbsp; if (second == 'sup') {&nbsp; &nbsp; sup++;&nbsp; }&nbsp; var count2;&nbsp; if (dps > tank && dps > sup) {&nbsp; &nbsp; count2 = "dps";&nbsp; }&nbsp;&nbsp;&nbsp;&nbsp; if (tank > dps && tank > sup) {&nbsp; &nbsp; count2 = "tank";&nbsp; }&nbsp;&nbsp;&nbsp; if (sup > dps && sup > tank) {&nbsp; &nbsp; count2 = "sup";&nbsp; }&nbsp; var result = document.getElementById("motek");&nbsp; result.innerText = count2;}<form id='hello' onsubmit="count(); return false">&nbsp; <h3>what your favorite food?</h3>&nbsp; <input type="radio" name="first" value="tank">hghjghj<br>&nbsp; <input type="radio" name="first" value="dps">hghjfgsfghj<br>&nbsp; <input type="radio" name="first" value="sup">hghsgdsdqqwj<br>&nbsp; <h3>what your favorite food?</h3>&nbsp; <input type="radio" name="second" value="tank">Tank<br>&nbsp; <input type="radio" name="second" value="dps">DPS<br>&nbsp; <input type="radio" name="second" value="sup">SUPP<br>&nbsp; <input type="submit" value="submit"></form><div id="motek"></div>