JSFiddle - React, Tailwind, and code Playground

by LyndseyB

HTML

<select id="matrixType">
    <option value="risks"> Risk </option>
    <option value="opps"> Opportunity </option>
</select>

<select id="RiskOpsLikelihoodAfterControl" name="RiskOpsLikelihoodAfterControl" >   
    <option value="1"> Rare </option>
    <option value="2"> Unlikely </option>
    <option value="3"> Possible </option>
    <option value="4"> Reasonably Likely </option>
</select>

<select id="RiskOpsImpactAfterControl" name="RiskOpsImpactAfterControl" >
    <option value="1"> Minor </option>
    <option value="2"> Moderate </option>
    <option value="3"> Major </option>
    <option value="4"> Severe </option>
</select>   

<span id="js-matrix"></span>

CSS

#js-matrix {
    display: inline-block;
    padding: 1em;
    border: 1px solid black;
}

JavaScript

function oppsAndRiskMatrix(matrix, likelihood, impact) {
    
    var likelihood = $('#RiskOpsLikelihoodAfterControl').val(),
        impact = $('#RiskOpsImpactAfterControl').val(),
    	matrixType = $('#matrixType').val(),
        matrix = $('#js-matrix'),
        matrices = {
            opps: {
                matrix: [
                    ["04 - Moderate", " 08 - Key", "12 - Major", "16 - Major"],
                    ["03 - Moderate", " 06 - Key", "09 - Key", "12 - Major"],
                    ["02 - Low", " 04 - Moderate", "06 - Key", "08 - Key"], 
                    ["01 - Low", " 02 - Low", "03 - Moderate", "04 - Moderate"]
                ],
                colors: [
                    ["blue", "blue", "navy", "navy"],
                    ["lightblue", "blue", "blue", "navy"],
                    ["grey", "lightblue", "blue", "blue"], 
                    ["grey", "grey", "blue", "navy"]
                ],
            },
            risks: {
               matrix: [
                  ["4 - Moderate", " 8 - High", "12 - Critical", "16 - Critical"],
                  ["3 - Moderate", " 0 - High", "9 - High", "12 - Critical"],
                  ["2 - Minor", " 4 - Moderate", "6 - High", "8 - High"], 
                  ["1 - Minor", " 2 - Minor", "3 - Moderate", "4 - Moderate"]
               ],
               colors: [
                   ["yellow", "orange", "red", "red"],
                   ["yellow", "orange", "orange", "red"],
                   ["green", "yellow", "orange", "orange"], 
                   ["green", "green", "yellow", "yellow"]
               ]
            }        
        };      
    
    if(likelihood && impact && (matrixType && matrixType !== "0")) {
        var obj = matrices[matrixType],           
            m = obj.matrix,
            c = obj.colors,
            len = m.length;
        
        console.log(likelihood-1, impact-1);

        matrix
            .text(m[len-(likelihood-1)][impact-1])     
           ...