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

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() {

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

  var second = document.querySelector('input[name="second"]:checked').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(); return false">

  <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 favorite food?</h3>

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

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

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

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

</form>

<div id="motek">

</div>