javascript - Add text to textbox when check if radio box is selected -

i trying make little project myself in order better understand javascript. not looking expert have better understanding.

i making dilution calculator , wondering best way insert units (either oz or ml) input boxes , output divs based on whether or not radio selected. automatically happen on page load on change of radio.

<div class="input-group input-margin-top">   <input type="text" id="containersize" class="form-control" value="0" onclick="this.select();">   <span class="input-group-addon">     <input type="radio" name="inlineradiooptions" id="ounces" checked> oz   </span>   <span class="input-group-addon">     <input type="radio" name="inlineradiooptions" id="millilitres"> ml   </span>      </div> 

here how have html setup radio buttons

i wondering best way not have nan show when select ml radio before entering values. thinking if statement check if value of first box 0 not run convert function. open ideas here.

here have, keep in mind 48 hours ago had never worked javascript jsfiddle

i learning how if have links on subject let me know.

thanks help. appreciate it.

see in action here: https://jsfiddle.net/7dhyue0p/1/

i've added comments throughout code can see what's happening every step of way. if there's confused or unsure about, don't hesitate ask, i'm happy help.

note: highly recommend learning @ least basics of javascript before working libraries (like jquery)

function calculate(event) {      // container size     var containersize = parsefloat(document.getelementbyid("containersize").value);      // dilution     var dilution = parsefloat(document.getelementbyid("dilution").value);      // calculate concentrate result     var concentrateresult = containersize / ((dilution) + (1));      // calculate water result     var waterresult = concentrateresult * dilution;      // array of of radio elements in "inlineradiooptions"     var radios = document.getelementsbyname("inlineradiooptions");      // declare variable "unit" hold name of unit     var unit;      // loop through radio buttons     (var = 0; < radios.length; i++) {          // if radio button checked         if (radios[i].checked) {              // assign value of radio button variable "unit"             unit = radios[i].value;         }     }      // find value of element clicked - if value "oz"...     if (event.target.value === "oz") {         // update elements         document.getelementbyid("containersize").value = (containersize / (29.5735)).tofixed(1) + unit;         document.getelementbyid("concentrateresults").innerhtml = (concentrateresult / (29.5735)).tofixed(1) + unit;         document.getelementbyid("waterresults").innerhtml = (waterresult / (29.5735)).tofixed(1) + unit;     } else if (event.target.value === "ml") {  // repeat "ml"         document.getelementbyid("containersize").value = (containersize * (29.5735)).tofixed(1) + unit;         document.getelementbyid("concentrateresults").innerhtml = (concentrateresult * (29.5735)).tofixed(1) + unit;         document.getelementbyid("waterresults").innerhtml = (waterresult * (29.5735)).tofixed(1) + unit;     } else {  // otherwise, if function wasn't triggered changing radio button...         document.getelementbyid("containersize").value = containersize.tofixed(1) + unit;         document.getelementbyid("concentrateresults").innerhtml = concentrateresult.tofixed(1) + unit;         document.getelementbyid("waterresults").innerhtml = waterresult.tofixed(1) + unit;     } };  // event listener make automatic // array of every input var inputs = document.getelementsbytagname("input");  // loop through inputs (var = 0; < inputs.length; i++) {      // add event handler each input     inputs[i].addeventlistener("change", function (event) {         // capture event , pass calculate() function         calculate(event);     }); } 

i changed lot of code had in there.

i combined calculate() function make repeatable.

first - when coding in javascript - name variables understand are. using arbitrary letters variables not idea. should able read code , understand what's going on.

second - added event listener on of inputs on page, , capture event pass calculate() function.

var inputs = document.getelementsbytagname("input");  (var = 0; < inputs.length; i++) {     inputs[i].addeventlistener("change", function (event) {         calculate(event);     }); } 

the reason passing in event listener can determine within 1 function element clicked (for changing between oz , ml)

if (event.target.value === "oz") {     document.getelementbyid("containersize").value = (containersize / (29.5735)).tofixed(1) + unit;     document.getelementbyid("concentrateresults").innerhtml = (concentrateresult / (29.5735)).tofixed(1) + unit;     document.getelementbyid("waterresults").innerhtml = (waterresult / (29.5735)).tofixed(1) + unit; } else if (event.target.value === "ml") {     document.getelementbyid("containersize").value = (containersize * (29.5735)).tofixed(1) + unit;     document.getelementbyid("concentrateresults").innerhtml = (concentrateresult * (29.5735)).tofixed(1) + unit;     document.getelementbyid("waterresults").innerhtml = (waterresult * (29.5735)).tofixed(1) + unit; } else {     document.getelementbyid("containersize").value = containersize.tofixed(1) + unit;     document.getelementbyid("concentrateresults").innerhtml = concentrateresult.tofixed(1) + unit;     document.getelementbyid("waterresults").innerhtml = waterresult.tofixed(1) + unit; } 

this function eliminates nan error , adds either "oz" or "ml" requested.

---

edited per comments

you can add multiple event listeners same element, if calls same function this:

var inputs = document.getelementsbytagname("input");     (var = 0; < inputs.length; i++) {         inputs[i].addeventlistener("keyup", function (event) {         calculate(event);     });     inputs[i].addeventlistener("change", function (event) {         calculate(event);     }); } 

here, added "keyup" event re-calculate number changed in text boxes. kept "change" event handler work expected on radio buttons.