Question

我正在尝试创建一个网站，并且它有一个询问问题的页面，根据所选的单选按钮，它将为您提供两个答案之一。如果＆＃34;是＆＃34;被选中它会告诉你你失败了。如果你选择全部五个作为＆＃34; no＆＃34;它会告诉你，你通过了。当我只有三个问题时，我有这个工作，但是当我尝试再添加两个，总共五个并更改代码以匹配它停止工作。无论我选择什么选择，它都不会给我一个答案。

这是HTML

<form id="myForm">
    <fieldset>
        <h3>
            <legend>Eligibility Test</legend>
        </h3>
    </fieldset>

    <p>Please Answer the following questions to determine if you are eligible for expungement.</p>

    <fieldset>

        <legend>Have you had your record expunged before?</legend>
        <input id="exp_yes" type="radio" name="field1" value="0" />
        <label>
            Yes
        </label>
        <input id="exp_no" type="radio" name="field1" value="1" />
        <label>
            No
        </label>

    </fieldset>

    <fieldset>
        <legend>Do you have any charges pending against you?</legend>
        <input id="chg_yes" type="radio" name="field2" value="0" />
        <label>
            Yes
        </label>
        <input id="chg_no" type="radio" name="field2" value="1" />
        <label>
            No
        </label>
    </fieldset>

    <fieldset>
        <legend>Have any of your convictions ever been for a murder / manslaughter or attempt of the same?</legend>
        <input id="mur_yes" type="radio" name="field3" value="0" />
        <label>
            Yes
        </label>
        <input id="mur_no" type="radio" name="field3" value="1" />
        <label>
            No
        </label>

    </fieldset>

    <fieldset>
        <legend>Have any of your convictions been for a sex crime or required you to sign up for the sex offender registry?</legend>
        <input id="off_yes" type="radio" name="field4" value="0" />
        <label>
            Yes
        </label>
        <input id="off_no" type="radio" name="field4" value="1" />
        <label>
            No
        </label>

    </fieldset>

    <fieldset>
        <legend>Do you still owe any fines, fees, or restitution on any of criminal convictions?
        </legend>
        <input id="fin_yes" type="radio" name="field5" value="0" />
        <label>
            Yes
        </label>
        <input id="fin_no" type="radio" name="field5" value="1" />
        <label>
            No
        </label>

    </fieldset>
    <fieldset id="submitbutton">
        <input type="button" id="submit" value="submit" onclick='answer()' />
    </fieldset>
    <div id="first">
        <p id="totalScore"></p>
    </div>
</form>

这是我的JavaScript

function answer(total) {
    var score = 0;
    if (document.getElementById('exp_no').checked) {
        score++;
    }
    if (document.getElementById('chg_no').checked) {
        score++;
    }
    if (document.getElementById('mur_no').checked) {
        score++;
    }
    if (document.getElementById('off_no').checked) {
        score++;
    }
    if (document.getElementById('fin_no').checked) {
        score++;
    }
    if (score != 5) {
        document.getElementById('totalScore').innerHTML = "You may not yet be 
        fully eligible to get your record expunged.Though this test should not be
        considered as a definite answer.Please call 574 - 931 - 2173 or visit our
        contact page to schedule a meeting
        for a proper assessment.
        ";
        toggletab();
    } else {
        document.getElementById('totalScore').innerHTML = "You appear to be eligible 
        for expungment!Please contact 574 - 931 - 2173 or visit our contact page to
        schedule a meeting and to talk to about your next steps!";
        toggletab2();
    }
}

function answer(total) {
    var score = 0;
    if (document.getElementById('exp_no').checked) {
        score++;
    }
    if (document.getElementById('chg_no').checked) {
        score++;
    }
    if (document.getElementById('mur_no').checked) {
        score++;
    }
    if (document.getElementById('off_no').checked) {
        score++;
    }
    if (document.getElementById('fin_no').checked) {
        score++;
    }
    if (score != 5) {
        document.getElementById('totalScore').innerHTML = "You may not yet be 
        fully eligible to get your record expunged.Though this test should not be
        considered as a definite answer.Please call 574 - 931 - 2173 or visit our
        contact page to schedule a meeting
        for a proper assessment.
        ";
        toggletab();
    } else {
        document.getElementById('totalScore').innerHTML = "You appear to be eligible 
        for expungment!Please contact 574 - 931 - 2173 or visit our contact page to
        schedule a meeting and to talk to about your next steps!";
        toggletab2();
    }
}

谢谢，当我尝试调整它时，我真的不明白它为什么会断裂。

Answer 1

问题似乎与您的.innerHTML文字字符串有关。由于您的格式设置，JavaScript会将您的第一个文本字符串解释为You may not yet be，然后抛出一个语法错误，认为fully eligible是无效的JavaScript。

将整个字符串存储在一行上似乎可以解决问题：

function answer(total) {
  var score = 0;
  if (document.getElementById('exp_no').checked) {
    score++;
  }
  if (document.getElementById('chg_no').checked) {
    score++;
  }
  if (document.getElementById('mur_no').checked) {
    score++;
  }
  if (document.getElementById('off_no').checked) {
    score++;
  }
  if (document.getElementById('fin_no').checked) {
    score++;
  }
  if (score != 5) {
    document.getElementById('totalScore').innerHTML = "You may not yet be fully eligible to get your record expunged. Though this test should not be considered as a definite answer. Please call 574 - 931 - 2173 or visit our contact page to schedule a meeting for a proper assessment.";
    //toggletab();
  } else {
    document.getElementById('totalScore').innerHTML = "You appear to be eligible for expungment! Please contact 574 - 931 - 2173 or visit our contact page to schedule a meeting and to talk to about your next steps!";
    //toggletab2();
  }
}

<form id="myForm">
  <fieldset>
    <h3>
      <legend>Eligibility Test</legend>
    </h3>
  </fieldset>
  <p>Please Answer the following questions to determine if you are eligible for expungement.</p>
  <fieldset>
    <legend>Have you had your record expunged before?</legend>
    <input id="exp_yes" type="radio" name="field1" value="0" />
    <label>Yes</label>
    <input id="exp_no" type="radio" name="field1" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Do you have any charges pending against you?</legend>
    <input id="chg_yes" type="radio" name="field2" value="0" />
    <label>Yes</label>
    <input id="chg_no" type="radio" name="field2" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Have any of your convictions ever been for a murder / manslaughter or attempt of the same?</legend>
    <input id="mur_yes" type="radio" name="field3" value="0" />
    <label>Yes</label>
    <input id="mur_no" type="radio" name="field3" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Have any of your convictions been for a sex crime or required you to sign up for the sex offender registry?</legend>
    <input id="off_yes" type="radio" name="field4" value="0" />
    <label>Yes</label>
    <input id="off_no" type="radio" name="field4" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Do you still owe any fines, fees, or restitution on any of criminal convictions?
    </legend>
    <input id="fin_yes" type="radio" name="field5" value="0" />
    <label>Yes</label>
    <input id="fin_no" type="radio" name="field5" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset id="submitbutton">
    <input type="button" id="submit" value="submit" onclick='answer()' />
  </fieldset>
  <div id="first">
    <p id="totalScore"></p>
  </div>
</form>

请注意，我已注释掉toggletab()和toggletab2()，因为这两个函数在您的示例中未定义。

希望这有帮助！：）

Answer 2

对于有趣和游戏，我将采用Obsidians answer并稍微改进一下。

黑曜石已经解决了你的问题（因此，在我们的两个答案中，他们应该得到公认的答案荣誉）。字符串需要在一行上。 Javascript会将任何新行视为新命令，即使在字符串分隔符中也是如此。

使用querySelectorAll方法，我们可以比较使用CSS选择器找到的元素的长度。

function answer(total) {
  var score = 0;
  
  //This all seemed like a good idea at the time but there is a better way!
  //Get all our no buttons -> Any radio button with a value of one that is in a fieldset tag.
  //var noButtons = document.querySelectorAll("fieldset input[type='radio'][value='1']");
  
  //Loop through our no buttons keeping a track of the score
  /*for(var i = 0; i < noButtons.length; i++){
    if(noButtons[i].checked){
      score++;
    }
  }*/
  
 
  //If there are un checked no buttons....uh oh!
  //if (score != noButtons.length) {
  
  //The if statme below does the following
  //Find all radio buttons with a value of 1 that are checked and are in a field set and count them.
  //Compare that to the number of radio buttons with a value of radio buttons with a value of 1 that are in a field set.
  if(document.querySelectorAll("fieldset input[type='radio'][value='1']:checked").length != document.querySelectorAll("fieldset input[type='radio'][value='1']").length) {
    document.getElementById('totalScore').innerHTML = "You may not yet be fully eligible to get your record expunged. Though this test should not be considered as a definite answer. Please call 574 - 931 - 2173 or visit our contact page to schedule a meeting for a proper assessment.";
    //toggletab();
  } else {
    document.getElementById('totalScore').innerHTML = "You appear to be eligible for expungment! Please contact 574 - 931 - 2173 or visit our contact page to schedule a meeting and to talk to about your next steps!";
    //toggletab2();
  }
}

<form id="myForm">
  <fieldset>
    <h3>
      <legend>Eligibility Test</legend>
    </h3>
  </fieldset>
  <p>Please Answer the following questions to determine if you are eligible for expungement.</p>
  <fieldset>
    <legend>Have you had your record expunged before?</legend>
    <input id="exp_yes" type="radio" name="field1" value="0" />
    <label>Yes</label>
    <input id="exp_no" type="radio" name="field1" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Do you have any charges pending against you?</legend>
    <input id="chg_yes" type="radio" name="field2" value="0" />
    <label>Yes</label>
    <input id="chg_no" type="radio" name="field2" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Have any of your convictions ever been for a murder / manslaughter or attempt of the same?</legend>
    <input id="mur_yes" type="radio" name="field3" value="0" />
    <label>Yes</label>
    <input id="mur_no" type="radio" name="field3" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Have any of your convictions been for a sex crime or required you to sign up for the sex offender registry?</legend>
    <input id="off_yes" type="radio" name="field4" value="0" />
    <label>Yes</label>
    <input id="off_no" type="radio" name="field4" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset>
    <legend>Do you still owe any fines, fees, or restitution on any of criminal convictions?
    </legend>
    <input id="fin_yes" type="radio" name="field5" value="0" />
    <label>Yes</label>
    <input id="fin_no" type="radio" name="field5" value="1" />
    <label>No</label>
  </fieldset>
  <fieldset id="submitbutton">
    <input type="button" id="submit" value="submit" onclick='answer()' />
  </fieldset>
  <div id="first">
    <p id="totalScore"></p>
  </div>
</form>

基本上，如果你想添加或删除问题，我在这里所做的就是让你的生活更轻松。你不必去重新编码。您也可以使用css类或数据属性来定义无按钮。

JavaScript一直在破碎

2 个答案: