单击替代单选按钮时，Javascript 值不会更改

Question

我正在学习 JavaScript....慢慢来。我在为一个 friend 做前端工作，边走边学。我认为 JavaScript 是比 Jquery 更好的起点，所以请在回答时记住这一点，除非我对上述假设有误。

我的问题如下

查看上图时，您可以看到已针对所选的低风险 选项正确计算了估计返回。

但是，如果用户在不移动 slider 的情况下单击高风险 单选按钮，然后单击获取估算按钮。数量不更新...？

只有当用户移动 slider 时，数量才会根据所选的单选按钮更新。但是，如果在不移动 slider 的情况下更改单选按钮，则数量不会更新。希望这是有道理的？如果不是，请告诉我，我很乐意澄清。

代码如下:

单选按钮(缩写版)

<input type="radio" id="control_01" name="risk" value="1" checked>
 <input type="radio" id="control_02" name="risk" value="2">
 <input type="radio" id="control_03" name="risk" value="3">

Javascript

 function getReturn() {
   var risk = document.forms[0];
   var slideAmount = document.getElementById("slideAmount").value;
   var txt;
   var returns;
   var i;
   for (i = 0; i < risk.length; i++) {
     if (risk[i].checked) {
       txt = risk[i].value;
     } //for
     if (txt = 1) {
       returns = slideAmount * 0.06;
       returns = Math.ceil(returns); // NO decimals
     }
     if (txt = 2) {
       returns = slideAmount * 0.11;
       returns = Math.ceil(returns); // NO decimals

     }
     if (txt = 3) {
       returns = slideAmount * 0.17;
       returns = Math.ceil(returns); // NO decimals

     }
   } //for
   document.getElementById("returns").innerHTML = "ESTIMATED RETURN PA: <span style='color:red'><i class='fa fa-usd fa-lg'></i>" + returns + "</span>";
 }

点击时的 HTML 按钮

 <button type="button" class="btn btn-primary btn-lrg" onclick="getReturn()">GET ESTIMATE</button>
        <div id="returns" style="font-weight: 800; color:black; font-size: 15px">Estimated</div>

感谢任何建议、帮助和提示。

Answer 1

txt = 1 不是比较，而是赋值。它必须是 txt == 1, ... 。您编写它的方式 txt = 3 将始终为真，因为 3 为真。

一般来说你应该使用像eslint这样的linter或代码样式指南指南工具，如 standardjs ，这些工具会警告您注意这些常见的错误和陷阱。

除此之外，你应该这样写这种 if 子句:

 if (txt == 1) {
   returns = slideAmount * 0.06;
   returns = Math.ceil(returns); // NO decimals
 } else if (txt == 2) {
   returns = slideAmount * 0.11;
   returns = Math.ceil(returns); // NO decimals
 } else if (txt == 3) {
   returns = slideAmount * 0.17;
   returns = Math.ceil(returns); // NO decimals
 }

如果可能，请使用 === 而不是 ==。

if (risk[i].checked) {
  txt = Number(risk[i].value); // convert the value to a Number
} //for

if (txt === 1) {
   returns = slideAmount * 0.06;
   returns = Math.ceil(returns); // NO decimals
} else if (txt === 2) {
   returns = slideAmount * 0.11;
   returns = Math.ceil(returns); // NO decimals
} else if (txt === 3) {
   returns = slideAmount * 0.17;
   returns = Math.ceil(returns); // NO decimals
}