单击可选单选按钮时，Javascript值不会更改_Javascript_Jquery_Html

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

javascript jquery html

单击可选单选按钮时，Javascript值不会更改,javascript,jquery,html,Javascript,Jquery,Html,我正在慢慢地学习JavaScript。我在为一个朋友做前端工作，一边学习。我认为JavaScript是一个比Jquery更好的起点，所以在回答时请记住这一点，除非我错误地假设了上述内容我的问题如下查看上图时，您可以看到所选的低风险选项已正确计算了估计回报但是，如果用户在不移动滑块的情况下单击高风险单选按钮，然后单击获取估计值按钮。金额不更新仅当用户移动滑块时，金额才会根据所选单选按钮进行更新。但如果单选按钮在不移动滑块的情况下更改，则金额不会更新。希望这有意义？如果没有，请让我知道，我

我正在慢慢地学习JavaScript。我在为一个朋友做前端工作，一边学习。我认为JavaScript是一个比Jquery更好的起点，所以在回答时请记住这一点，除非我错误地假设了上述内容

我的问题如下

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

但是，如果用户在不移动滑块的情况下单击高风险单选按钮，然后单击获取估计值按钮。金额不更新

仅当用户移动滑块时，金额才会根据所选单选按钮进行更新。但如果单选按钮在不移动滑块的情况下更改，则金额不会更新。希望这有意义？如果没有，请让我知道，我很乐意澄清

代码如下：

单选按钮（缩短版）

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

函数getReturn（）{ var风险=单据.表格[0]； var slideAmount=document.getElementById（“slideAmount”）.value； var-txt； var收益； var i；对于（i=0；i 单击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>

获取估计值
估计的

任何建议、帮助和提示都将不胜感激

txt=1

不是比较，而是赋值。它必须是

txt==1

。您编写它的方式永远是正确的，因为

是真实的

通常，您应该使用linter-like或code-styleguide-guide-guideline工具，这些工具会警告您这些常见错误和陷阱

除此之外，您还应这样编写此类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
}

解决的办法不仅仅是纠正错误，还要减少代码行的数量

function getReturn() {
  var risk = document.forms[0];
  var slideAmount = document.getElementById("slideAmount").value;
  var txt;
  var returns;
  for (var i = 0; i < risk.length; i++) {
    if (risk[i].checked) {
      txt = risk[i].value;
    } //for
    if (txt == 1) {
     returns = slideAmount * 0.06;
    } else if (txt == 2) {
     returns = slideAmount * 0.11;
    } else if (txt == 3) {
     returns = slideAmount * 0.17;
    }
  } //for
  document.getElementById("returns").innerHTML = "ESTIMATED RETURN PA: <span style='color:red'><i class='fa fa-usd fa-lg'></i>" + Math.ceil(returns) + "</span>";
}

函数getReturn（）{ var风险=单据.表格[0]； var slideAmount=document.getElementById（“slideAmount”）.value； var-txt； var收益；对于（var i=0；i

是赋值运算符，而

是比较运算符

希望这能对您有所帮助。

代码中有几个问题

找到单选按钮后，应退出for循环

正如在几篇文章中提到的，在比较器中，

应该替换为

您有不完整的HTML，让那些提供帮助的人对DOM元素做出假设。例如，示例中缺少

和

下面请查找添加了缺少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>


估计
估计的
函数getReturn（）{
var风险=单据.表格[0]；
var slideAmount=document.getElementById（“slideAmount”）.value；
var收益；
对于（var i=0；i

您好，请在功能上进行以下更改：

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

函数getReturn（）{ var risk=document.getElementsByName（'risk'）；//更改 var slideAmount=document.getElementById（“slideAmount”）.value； var-txt； var收益； var i；对于（i=0；i

txt=1

不是比较，而是赋值。它必须是

txt==1

。你写它的方式永远是正确的，因为

是真实的。@t.niese-DOH！而且我的朋友是正确的答案，而且有效。你会喜欢我吗

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