Question

我正在慢慢学习JavaScript ....我正在为一位朋友工作前端并随着我的学习而学习。我认为JavaScript会比Jquery更好的起点，所以请在回答时记住这一点，除非我假设上述内容错误。

我的问题如下

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

但是，如果用户点击高风险单选按钮而不移动滑块，然后点击获取估算按钮。金额不更新......？

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

代码如下：

收音机按钮（缩短版）

<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
}

Answer 2

解决方案不是纠正你的错误，而是减少代码行数。

==是赋值运算符，而{{1}}是比较运算符。

希望这会对你有所帮助。

Answer 3

代码有几个问题。

找到单选按钮后，您应该退出for循环
正如几篇文章所述，=应在比较器中替换为==。
你有不完整的HTML留下那些提供帮助来对你的DOM元素做出假设。例如，示例中缺少<form>和<input type="range">。

请在下面找到添加了缺少DOM元素和简化逻辑的示例。以switch/case为例，因为有些人认为这更容易阅读。它在逻辑上等同于if/else示例。

<html>
<form>
    <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">
</form>

<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>
<input type="range" id="slideAmount" value="1" max="100"></input>

<script>
function getReturn() {
    var risk = document.forms[0];
    var slideAmount = document.getElementById("slideAmount").value;
    var returns;
    for (var i = 0; i < risk.length; i++) {
        // Skip unchecked radio buttons
        if (!risk[i].checked) {
            continue;
        }
        // Divide by one to force string to value
        switch(risk[i].value/1) {
            case 1:
                returns = Math.ceil(slideAmount * 0.06);
                break;
            case 2:
                returns = Math.ceil(slideAmount * 0.11);
                break;
            case 3:
                returns = Math.ceil(slideAmount * 0.17);
                break;
            default:
                console.error("Shouldn't have reached " + risk[i].value);
        }
    }
    document.getElementById("returns").innerHTML = "ESTIMATED RETURN PA: <span style='color:red'><i class='fa fa-usd fa-lg'></i>" + returns + "</span>";
}
</script>
</html>

Answer 4

嗨，请在功能中进行以下更改：

 function getReturn() {
   var risk = document.getElementsByName('risk'); // change
   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") {  // change
       returns = slideAmount * 0.06;
       returns = Math.ceil(returns); // NO decimals
     }
     if (txt === "2") { // change
       returns = slideAmount * 0.11;
       returns = Math.ceil(returns); // NO decimals

     }
     if (txt === "3") { // change
       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>";
 }

单击备用单选按钮时，Javascript值不会更改

4 个答案: