为什么我的总范围值没有显示正确的关联文本？

Question

我有 8 个带有单选按钮答案的问题。每个答案都有一个存储值。我有一个函数可以遍历所有表单并计算所有选定答案的总值。当值在特定范围之间时，我试图显示不同的文本，但它无法正常工作。任何帮助表示赞赏。function DisplayPrice(price) {  var val1 = 0;  for (i = 0; i < document.form1.price1.length; i++) {    if (document.form1.price[i].checked == true) {      val1 = document.form1.price[i].value;    }  }  var val2 = 0;  for (i = 0; i < document.form2.price2.length; i++) {    if (document.form2.price2[i].checked == true) {      val2 = document.form2.price2[i].value;    }  }     var sum =    parseInt(val1) +    parseInt(val2) +  document.getElementById("totalSum").value = sum;    $(function () {    $("#submit").on("click", function () {      if (sum <= 9) {        $("#tolerance").replaceWith("<p>Conservative</p>");      } else if ((sum >= 10) && (sum <= 15)) {        $("#tolerance").replaceWith("<p>Moderately Conservative</p>");      } else if ((sum >= 16) && (sum <= 28)) {        $("#tolerance").replaceWith("<p>Moderate</p>");      } else if ((sum >= 29) && (sum <= 39)) {        $("#tolerance").replaceWith("<p>Moderately Assertive</p>");      } else {        $("#tolerance").replaceWith("<p>Assertive</p>");      }    });  });}  <h3>Sample question 1</h3>  <form name="form1" id="form1" runat="server">    <input id="rdo_1" type="radio" value="5" name="price1" onclick="DisplayPrice(this.value);">Answer 1    <br>    <input id="rdo_2" type="radio" value="10" name="price1" onclick="DisplayPrice(this.value);">Answer 2    <br>    <input id="rdo_3" type="radio" value="15" name="price1" onclick="DisplayPrice(this.value);">Answer 3    <br>    <input id="rdo_4" type="radio" value="20" name="price1" onclick="DisplayPrice(this.value);">Answer 4    <br>  </form>  <br>

Answer 1

在纯 JS 中如此简单：

const myForm = document.forms['my-form']

  ,   toleR  = document.getElementById('tolerance')

  ;

myForm.onsubmit=e=>

  {

  e.preventDefault() // disable form submit

  let sum = Number(myForm.price1.value) + Number(myForm.price2.value)

    , txt = '<p>Conservative</p>'

    ;

  if (sum >  9) txt = '<p> Moderately Conservative </p>'

  if (sum > 15) txt = '<p> Moderate </p>'

  if (sum > 28) txt = '<p> Moderately Assertive </p>'

  if (sum > 39) txt = '<p> Assertive </p>'

  myForm.totalSum.value = sum

  toleR.innerHTML = txt

  }

body {

  font-family: Arial, Helvetica, sans-serif;

  font-size: 14px;

  }

p {

  display          : block;

  height           : 1.6em;

  background-color : lightgrey;

  padding          : .2em;

  }

h3 {

  margin-top: .7sem;

  margin-bottom: .3em;

  }

<form name="my-form" >

  <h3>Sample question 1</h3>

  <label> <input type="radio" value="5"  name="price1" required> Answer 1 </label><br>

  <label> <input type="radio" value="10" name="price1"> Answer 2 </label><br>

  <label> <input type="radio" value="15" name="price1"> Answer 3 </label><br>

  <label> <input type="radio" value="20" name="price1"> Answer 4 </label><br>

  <h3>Sample question 2</h3>

  <label> <input type="radio" value="4"  name="price2" required> Answer 1 </label><br>

  <label> <input type="radio" value="8"  name="price2"> Answer 2 </label><br>

  <label> <input type="radio" value="12" name="price2"> Answer 3 </label><br>

  <label> <input type="radio" value="16" name="price2"> Answer 4 </label><br>

  <br>

  <button type="submit">Calculate</button>

  <div id="tolerance"><p></p></div>

  <h3>Your score is:</h3>

  <input type="text" name="totalSum" value="" size="2" readonly >

</form>