CODEWITHSUNDEEP
javascriptjqueryhtml
Tim C
Tim C

Reputation: 5714

Javascript value does not change when alternative radio button is clicked

Im learning JavaScript....slowly. Im working front end for a friend and learning as I go along. I thought JavaScript would be a better starting point than Jquery so please keep that in mind when answering, unless I am wrong assuming the above.

My problem is as follows

enter image description here

When looking at above image you can see the estimated return has been correctly calculated for the low risk option selected.

However if user clicks High Risk radio button without moving slider and then clicks the get estimate button. the amount does not update...?

Only when user moves slider the amount will update according to radio button selected. But if radio button is changed without moving slider the amount DOES NOT UPDATE. Hope this makes sense? If not please let me know and ill be happy to clarify.

Code as follows:

Radio Buttons (shortened version)

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

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

Any advice, help and tips appreciated.

Upvotes: 2

Views: 808

Answers (4)

Manisha Sharma
Manisha Sharma

Reputation: 86

Hi please do these changes in function:

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

Upvotes: 0

tresf
tresf

Reputation: 7922

There are several issues with the code.

  1. You should exit your for loop when the radio button has been found
  2. As mentioned in several posts, = should be replaced with == in your comparators.
  3. You have incomplete HTML leaving those offering help to make assumptions about your DOM elements. For example, <form> and <input type="range"> are missing from the example.

Below please find a sample with missing DOM elements added and simplified logic. A switch/case was used as an example because some find this easier to read. It is otherwise logically equivalent to the if/else examples.

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

Upvotes: 0

t.niese
t.niese

Reputation: 40852

txt = 1 is not a comparison, it is an assignment. It has to be txt == 1, ... . The way you wrote it txt = 3 will always be true, because 3 is truthy.

In general you should use a linter like eslint or a code styleguide guideline tool like standardjs, those tools warn you about these common mistakes and pitfalls.

Beside that, you should write this kind of if clauses that way:

 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
 }

And if possible use === instead of ==.

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
}

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Solution is just not to correct your mistake, but also to reduce the number of line of code.

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

= is an assignment operator, whereas == is a comparison operator.

Hope this will help you.

Upvotes: 0

Related Questions