Question

我有一个非常简单的HTML测验。它询问用户几乎没有关于他们正在寻找什么样的汽车的问题并建议一个。但我无法让javascript工作。这是一个非常简单的剧本，所以我不知道自己在做什么。任何帮助，将不胜感激。

<form id="form" action="">
<p>What size do you need?</p>
<input type="radio" name="size" value="compact">Compact<br>
<input type="radio" name="size" value="mid">Midsize<br>
<input type="radio" name="size" value="small">Small SUV<br>
<input type="radio" name="size" value="med">Medium SUV<br>
<input type="radio" name="size" value="big">Big SUV

<p>What kind of driving will you be doing?</p>
<input type="radio" name="drive" value="city">City/suburb driving<br>
<input type="radio" name="drive" value="mountain">Mountain driving

<p>Which would you rather have?</p>
<input type="radio" name="mpg" value="mpg">Good gas milage<br>
<input type="radio" name="mpg" value="performance">Performance

<p>How much do luxury features matter to you?</p>
<input type="radio" name="money" value="money">I'd rather save money and have less luxury features<br>
<input type="radio" name="money" value="luxury">I'd rather spend a little more and have luxury features.

<p><input type="submit" value="submit"></p>
</form>

使用Javascript：

document.getElementById("form").onsubmit=function() {
    size = document.querySelector('input[name = "size"]:checked').value;
    drive = document.querySelector('input[name = "drive"]:checked').value;
    mpg = document.querySelector('input[name = "mpg"]:checked').value;
    money = document.querySelector('input[name = "money"]:checked').value;         

    if (size == "compact" && drive == "city" && mpg == "mpg" && money == "money") 
    {
        result = "Prius";
    }   else {
        result = "something else";
    }
    document.getElementById("suggestion").innerHTML = result; 
return false; // required to not refresh the page
};

Answer 1

您的代码有几个问题。

首先，您需要使用var声明您的变量。您需要为每个单选按钮设置默认值。同样来自您的示例document.getElementById("suggestion")永远不会进入DOM。

Here a working demo

Answer 2

一个问题，你会注意到

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

按下提交按钮时，

将返回错误。此错误可能是由用户未选择选项引起的。如果用户没有选择选项，那么

document.querySelector('input[name = "size"]:checked')为空。因此null.value无效，您的控制台会显示此信息。

您可以使用

测试每个对象是否为null

 document.querySelector('input[name ="size"]:checked') ?

这是一个片段

＆＃13;

document.getElementById("form").onsubmit = function() {
  size = document.querySelector('input[name ="size"]:checked') ? document.querySelector('input[name ="size"]:checked').value : "";
  drive = document.querySelector('input[name ="drive"]:checked') ? document.querySelector('input[name ="drive"]:checked').value : "";
  mpg = document.querySelector('input[name ="mpg"]:checked') ? document.querySelector('input[name ="mpg"]:checked').value : "";
  money = document.querySelector('input[name ="money"]:checked') ? document.querySelector('input[name ="money"]:checked').value : "";



  if (size == "compact" && drive == "city" && mpg == "mpg" && money == "money") {
    result = "Prius";
  } else {
    result = "something else";
  }
  document.getElementById("suggestion").innerHTML = result;
  return false; // required to not refresh the page
};

＆＃13;

<form id="form" action="">
  <p>What size do you need?</p>
  <input type="radio" name="size" value="compact">Compact<br>
  <input type="radio" name="size" value="mid">Midsize<br>
  <input type="radio" name="size" value="small">Small SUV<br>
  <input type="radio" name="size" value="med">Medium SUV<br>
  <input type="radio" name="size" value="big">Big SUV

  <p>What kind of driving will you be doing?</p>
  <input type="radio" name="drive" value="city">City/suburb driving<br>
  <input type="radio" name="drive" value="mountain">Mountain driving

  <p>Which would you rather have?</p>
  <input type="radio" name="mpg" value="mpg">Good gas milage<br>
  <input type="radio" name="mpg" value="performance">Performance

  <p>How much do luxury features matter to you?</p>
  <input type="radio" name="money" value="money">I'd rather save money and have less luxury features<br>
  <input type="radio" name="money" value="luxury">I'd rather spend a little more and have luxury features.

  <p><input type="submit" value="submit"></p>
  <p id="suggestion">What kind of driving will you be doing?</p>
</form>

＆＃13;

从提交的表单中获取数据

2 个答案: