How do I load an external JS file in an IF statement inside of an onclick function?

Question

I am building a super simple page that converts Fahrenheit to Celsius and visa versa. On this page, I want to load different moving backgrounds I found online that are in external files. For instance, if the user enters "32" or less in the Fahrenheit section, then the background has a snow effect. I am wanting to accomplish this with pure JavaScript; not Node.js or jQuery, etc.

Here's the code I have:

HTML:

<section id="form_div">
    <form id="conversion_form">
         <label>
            Will you be entering the temperature in Farenheit?  Or Celsius?
         </label>
         <input type="radio" name="measurement" id="farenheit" value="farenheit">Farenheit
         <input type="radio" name="measurement" id="celsius" value="celsius">Celcius

         <span id="measurement_f">
             <label>
                 What is the tempurature (in Farenheit)?
             </label>
             <input type="number" name="temp" id="fTemp" maxlength="4">&deg;F
         </span>
         <span id="measurement_c">
             <label>
                What is the tempurature (in Celsius)?
             </label>
             <input type="number" name="temp" id="cTemp" maxlength="4">&deg;C
         </span>
    </form>

    <button id="F">Convert to Farenheit</button>
    <button id="C">Convert to Celsius</button>

    <section id="output"></section>
</section>

JAVASCRIPT:

    document.getElementById('measurement_f').style.display = 'none';
    document.getElementById('measurement_c').style.display = 'none';
    document.getElementById('F').style.display = 'none';
    document.getElementById('C').style.display = 'none';


    document.getElementById('farenheit').onclick = function(){
            document.getElementById('measurement_c').style.display = 'none';
            document.getElementById('F').style.display = 'none';
            document.getElementById('cTemp').value = '';
            document.getElementById('output').innerHTML = '';

            document.getElementById('measurement_f').style.display = 'block';
            document.getElementById('C').style.display = 'block';
    }   

    document.getElementById('celsius').onclick = function(){
        document.getElementById('measurement_f').style.display = 'none';
        document.getElementById('C').style.display = 'none';
        document.getElementById('fTemp').value = '';
        document.getElementById('output').innerHTML = '';

        document.getElementById('measurement_c').style.display = 'block';
        document.getElementById('F').style.display = 'block';

    }   

    document.getElementById('C').onclick = function() {
        var fTempVal = parseInt(document.getElementById('fTemp').value);
        var cTempVal = (fTempVal - 32) * (5 / 9);
        document.getElementById('output').innerHTML = cTempVal.toFixed('0') + '°C';


        if(fTempVal <= '32') {
           //Load <script src="js/snowstorm.js">
        }

        return false;
    }

    document.getElementById('F').onclick = function() {
        var cTempVal = parseFloat(document.getElementById('cTemp').value);
        var fTempVal = (cTempVal * (9 / 5)) + 32;
        document.getElementById('output').innerHTML = fTempVal.toFixed('0') + '&deg;F';

        if(cTempVal <= '0') {
           //Load <script src="js/snowstorm.js">
        }

        return false;
    }

Answer 1

You could programmatically load the script by creating a script tag with document.createElement

let script = document.createElement('script');
script.onload = function () {
    // Script has loaded so you can do something with it
};
script.src = // where your script comes from ;

document.head.appendChild(script);