單擊替代單選按鈕時，Javascript值不會更改

即時學習JavaScript ....我在爲朋友工作的前端和我一起學習。我認爲JavaScript是比Jquery更好的起點，所以請在回答時記住這一點，除非我錯誤地假設上述情況。單擊替代單選按鈕時，Javascript值不會更改

我的問題是如下

當你可以看到預計返還已被正確地計算出所選低風險選項上面圖片看。

但是，如果用戶點擊高風險單選按鈕不移動滑塊，然後點擊獲取估算值按鈕。金額不更新...？

只有當用戶移動滑塊時，數量將根據所選的單選按鈕進行更新。但是如果改變單選按鈕而沒有移動滑塊，數量不會更新。希望這是有道理的？如果沒有，請讓我知道，並不樂意澄清。

代碼如下：

單選按鈕（縮短版）

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

任何意見，幫助和提示表示讚賞。

來源

2017-09-07 Timothy Coetzee

'TXT = 1'是不是一個比較，它是一個任務。它必須是'txt == 1'，...。你寫'txt = 3'的方式永遠是真的，因爲'3'是真的。 –

@ t.niese DOH！而我的朋友是正確的答案，並且有效。你想把它作爲答案，我接受嗎？ –

@ t.niese請在答案部分提供答案。意見旨在獲取有關該問題的更多信息。 – Kraylog

txt = 1不是一個比較，它是一個任務。它必須是txt == 1，...。你寫的方式txt = 3將永遠是真的，因爲3是truthy。

一般而言，您應該使用像eslint這樣的linter或standardjs這樣的代碼風格指南工具，這些工具會警告您這些常見錯誤和缺陷。

除此之外，你應該寫這樣的條款，如果這樣：

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 
}

來源

2017-09-07 04:15:19

解決方案只是不是爲了糾正你的錯誤，也是爲了減少代碼行數。

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

=是賦值運算符，而==是比較運算符。

希望這會幫助你。

來源

2017-09-07 04:25:39 Shiladitya

代碼有幾個問題。

當單選按鈕已經發現
正如幾個職位中提到你應該退出的for循環，=應該與你的比較==所取代。
您有不完整的HTML，只能幫助您對DOM元素做出假設。例如，示例中缺少<form>和<input type="range">。

下面請查找缺少DOM元素添加和簡化邏輯的示例。 A 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>

來源

2017-09-07 04:39:59 tresf

您不應該使用像'risk [i] .value/1'這樣的結構，而應該使用'parseInt（risk [i] .value，10）'或'Number（risk [i] .value）'。你不應該使用'/ 1'的原因是可維護性。你總是需要添加一個註釋，比如'//將字符串轉換爲數字，以表示'/ 1'不是偶然添加的。 'parseInt'和'Number'完成轉換，並且已經包含這些數據必須轉換的信息。 –

@ t.niese然而，隱含的邏輯經常發生在JavaScript中，並且提供了用於學習的註釋，而不是用於可維護性。 '/ 1'可以並且應該被看作是一個學習的例子，不一定是複製/粘貼 - 很像'switch/case'的變化和非必需的變化，因爲'switch/case '也支持字符串。 – tresf

是的，js中隱含着很多事情。這一方面是一件好事，但另一方面可能會傷害可讀性或可維護性。如果您查看一個代碼並查看'val/1 === 2'或者甚至更加糟糕'+ val === 2'，則需要檢查這是否用於將字符串轉換爲數字，或者如果它是' 1 + val === 2'或類似的東西被誤刪了。所以你要麼寫一個評論，表明這是用來將字符串轉換爲數字，或者是使用那些給定的函數，這使得它在拳頭看起來很清楚它的意圖。 –

你好，請在功能上做這些改變：

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

來源

2017-09-07 05:41:40

單擊替代單選按鈕時，Javascript值不會更改

回答

相關問題