Why can't I flip through my embedded gists by changing the src attributes?

Question

I am trying to display my gists on my website by allowing the user to flip through them using a left and right arrow button. However when the button is clicked it does not change the gist displayed on my website.

This is the code I have in my JavaScript file.

let leftArrowProgram = document.getElementById('left-arrow-program');
let rightArrowProgram = document.getElementById('right-arrow-program');

let programs = ['https://gist.github.com/laurenneoliver/fad062ae77940c38ee82322f0abc63af.js','https://gist.github.com/laurenneoliver/ec55ffa1919e4b5aa92e329dd89a9578.js']

let programTag = document.getElementById('gist-script-tag');

function nextProgram() {
    if (i >= programs.length - 1) {
        return false;
    }
    i++;
    programTag.setAttribute('src', programs[i]);
}
function previousProgram() {
    if (i <= 0) {
        return false;
    }
    i--;
    programTag.setAttribute('src', programs[i]);
} 

rightArrowProgram.onclick = nextProgram;
leftArrowProgram.onclick = previousProgram;