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

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']&nbsp; ,&nbsp; &nbsp;toleR&nbsp; = document.getElementById('tolerance')&nbsp; ;myForm.onsubmit=e=>&nbsp; {&nbsp; e.preventDefault() // disable form submit&nbsp; let sum = Number(myForm.price1.value) + Number(myForm.price2.value)&nbsp; &nbsp; , txt = '<p>Conservative</p>'&nbsp; &nbsp; ;&nbsp; if (sum >&nbsp; 9) txt = '<p> Moderately Conservative </p>'&nbsp; if (sum > 15) txt = '<p> Moderate </p>'&nbsp; if (sum > 28) txt = '<p> Moderately Assertive </p>'&nbsp; if (sum > 39) txt = '<p> Assertive </p>'&nbsp; myForm.totalSum.value = sum&nbsp; toleR.innerHTML = txt&nbsp; }body {&nbsp; font-family: Arial, Helvetica, sans-serif;&nbsp; font-size: 14px;&nbsp; }p {&nbsp; display&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : block;&nbsp; height&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: 1.6em;&nbsp; background-color : lightgrey;&nbsp; padding&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : .2em;&nbsp; }h3 {&nbsp; margin-top: .7sem;&nbsp; margin-bottom: .3em;&nbsp; }<form name="my-form" >&nbsp; <h3>Sample question 1</h3>&nbsp; <label> <input type="radio" value="5"&nbsp; name="price1" required> Answer 1 </label><br>&nbsp; <label> <input type="radio" value="10" name="price1"> Answer 2 </label><br>&nbsp; <label> <input type="radio" value="15" name="price1"> Answer 3 </label><br>&nbsp; <label> <input type="radio" value="20" name="price1"> Answer 4 </label><br>&nbsp; <h3>Sample question 2</h3>&nbsp; <label> <input type="radio" value="4"&nbsp; name="price2" required> Answer 1 </label><br>&nbsp; <label> <input type="radio" value="8"&nbsp; name="price2"> Answer 2 </label><br>&nbsp; <label> <input type="radio" value="12" name="price2"> Answer 3 </label><br>&nbsp; <label> <input type="radio" value="16" name="price2"> Answer 4 </label><br>&nbsp; <br>&nbsp; <button type="submit">Calculate</button>&nbsp; <div id="tolerance"><p></p></div>&nbsp; <h3>Your score is:</h3>&nbsp; <input type="text" name="totalSum" value="" size="2" readonly ></form>