javascript - How to use radio buttons to change variable values -

i'm new coding , trying use html5 & javascript create educational simulation user input.

to limit input sensible values i'd use 3 radio buttons choose between air, water & oil.

each of these needs associated viscosity value & density value used later on in simulation. i've seen far how use "value" attribute of radio button output, seeing need 2 outputs tied each button how acheive (outputs sent 2 spans innerhtml taken getelementbyid().innerhtml later in script.

<div class="radio">     <p><b>fluid type</b></p> <form id="fluidform">     <p>         <label>air:   <input type="radio" name="fluid" value="air"   /></label>         <label>water: <input type="radio" name="fluid" value="water" /></label>         <label>oil:   <input type="radio" name="fluid" value="oil"   /></label>     </p> </form>  <span>fluid viscosity:</span>     <span id="param3">4500</span>&nbsp;pa s <br/> <span>fluid density:</span>     <span id="param4">4500</span>&nbsp;kg/m^3 <!-- si -->  <script>  document.getelementbyname("fluid").addeventlistener("change", radiochange); document.getelementbyname("fluid").addeventlistener("click", radiochange);  function radiochange (){     if (document.getelementbyname("fluid").value = "air"){         document.getelementbyid("param3").innerhtml = 50;         document.getelementbyid("param4").innerhtml = 100;     };     if (document.getelementbyname("fluid").value = "water"){         document.getelementbyid("param3").innerhtml = 60;            document.getelementbyid("param4").innerhtml = 110;     };     if (document.getelementbyname("fluid").value = "oil"){         document.getelementbyid("param3").innerhtml = 70;         document.getelementbyid("param4").innerhtml = 120;     }; };  //and further down variables called:  var viscosity = document.getelementbyid("param3").innerhtml; var fdensity = document.getelementbyid("param4").innerhtml;      </script> 

this doesn't seem work, , seems me (a total newbie) blunt way of going things anyway.

(the values inside spans place holders let me know if changes properly).

huge in advance help!

your code work after changes :

1. the getelementbyname() function doesn't exist should getelementsbyname() (note s in elements).

2. you should loop through list of nodes returned getelementbyname() , attach event every node :

   var fluids = document.getelementsbyname("fluid"); for(var i=0;i<fluids.length;i++){      fluids [i].addeventlistener("change", radiochange);      fluids [i].addeventlistener("click", radiochange); } 

3. you have define variables in global scope , override them inside radiochange() method new values.

4. you have use == of === when want compare instead of = should used affectation purpose.

hope helps, check working example below.

var viscosity = document.getelementbyid("param3").innerhtml;  var fdensity = document.getelementbyid("param4").innerhtml;    // attaching events here  var fluids = document.getelementsbyname("fluid");  for(var i=0;i<fluids.length;i++){    fluids[i].addeventlistener("change", radiochange);  }    function radiochange (){    var current_value = this.value;    var param3 = document.getelementbyid("param3");    var param4 = document.getelementbyid("param4");        if (current_value == "air"){      param3.innerhtml = 50;      param4.innerhtml = 100;    };    if (current_value == "water"){      param3.innerhtml = 60;         param4.innerhtml = 110;    };    if (current_value == "oil"){      param3.innerhtml = 70;      param4.innerhtml = 120;    };      viscosity = param3.innerhtml;    fdensity = param4.innerhtml;  };

<div class="radio">    <p>      <b>fluid type</b>    </p>    <form id="fluidform">      <p>        <label>air:   <input type="radio" name="fluid" value="air"   /></label>        <label>water: <input type="radio" name="fluid" value="water" /></label>        <label>oil:   <input type="radio" name="fluid" value="oil"   /></label>      </p>    </form>      <span>fluid viscosity:</span>    <span id="param3">4500</span>&nbsp;pa s    <br/>    <span>fluid density:</span>    <span id="param4">4500</span>&nbsp;kg/m^3 <!-- si -->  </div>