Javascript: Populate value of Text Fields with Variables based on Value of Select Menu

Question

The HTML:

<select id="SHIELD" onchange="calcCHO();" >
                                <option  value="610" selected >CHO-SHIELD 610</option>
                                <option  value="608" >CHO-SHIELD 608</option>
                                <option  value="604" >CHO-SHIELD 604</option>
                            </select>

    <input id="FILLER" type="text" disabled  value="" />

The Script:

    function calcCHO(){
var f_S = "Silver";
var f_N = "Nickel";
var f_SC = "Silver/Copper";
        
var CHOS = document.getElementById("SHIELD").value;
var FILLER = document.getElementById("FILLER").value;

if(CHOS === "610") { 
        FILLER = f_S;   
    }
    else if (CHOS === "608") { 
        FILLER = f_N;   
    }   
    else { 
        FILLER = f_SC;  
    }       
}

This looks pretty straightforward, any idea why it does not work or produce any console errors?

Thanks!

Answer 1

try it like that.

function calcCHO(){

var f_S = "Silver";
var f_N = "Nickel";
var f_SC = "Silver/Copper";

var CHOS = document.getElementById("SHIELD").value;
var FILLER = document.getElementById("FILLER");

if(CHOS === "610") {
    FILLER.value = f_S;
}
else if (CHOS === "608") {
    FILLER.value = f_N;
}
else {
    FILLER.value = f_SC;
}

}