How do I use HTML/Javascript radio buttons to prompt specific downloads?

Question

I'm trying to let users choose from five radio buttons that link to a separate file, and on the click of a "Accept & Download" button, they download the file that they selected in the radio button.

This is what I have below. When I click one of the radio buttons and click download, nothing happens.

Javascript:

<script>
var isgeorge = document.getElementById('george').checked;
var ismaci = document.getElementById('maci').checked;
var isandre = document.getElementById('andre').checked;
var iscaroline = document.getElementById('caroline').checked;
var isthai = document.getElementById('thai').checked;

var button = document.getElementById('download');
button.onclick = downloadFile;

function downloadFile() {
if(isgeorge) {
window.open("gaa2dn-resume.docx");
    }else
if(ismaci) {
window.open("maciresume.docx");
    }else
if(isandre) {
window.open("andreresume.pdf");
    }else
if(iscaroline) {
window.open("cpw6n-resume.pdf");
    }else
if(isthai) {
window.open("tk9kb-resume.pdf");
    }
}

HTML in this image: https://i.sstatic.net/sdqn5.png

Answer 1

You should be getting the checked values within the function. isgeorge and the other variables do not automatically get updated whenever the checkboxes are changed

So all you have to do is move your variables inside the function

function download(){
        var isgeorge = document.getElementById('george').checked;
        var ismaci = document.getElementById('maci').checked;
        //etc etc etc

Demo

note: since stack snippets dont allow creating new windows the demo just displays a message instead.

var log = document.getElementById('log');
var button = document.getElementById('download');
button.onclick = downloadFile;

function downloadFile() {
    var isgeorge = document.getElementById('george').checked;
    var ismaci = document.getElementById('maci').checked;
    var isandre = document.getElementById('andre').checked;
    var iscaroline = document.getElementById('caroline').checked;
    var isthai = document.getElementById('thai').checked;
    if(isgeorge) {
        log.innerText = "would have opened: gaa2dn-resume.docx";
        //window.open("gaa2dn-resume.docx");
    } else if(ismaci) {
        log.innerText = "would have opened: maciresume.docx";
        //window.open("maciresume.docx");
    } else if(isandre) {
        log.innerText = "would have opened: andreresume.pdf";
        //window.open("andreresume.pdf");
    } else if(iscaroline) {
        log.innerText = "would have opened: andreresume.pdf";
        //window.open("andreresume.pdf");
    } else if(isthai) {
        log.innerText = "would have opened: tk9kb-resume.pdf";
        //window.open("tk9kb-resume.pdf");
    }
}

<label for="george">George</label><input type="radio" name="download" id="george" /><br />
<label for="maci">Maci</label><input type="radio" name="download" id="maci" /><br />
<label for="andre">Andre</label><input type="radio" name="download" id="andre" /><br />
<label for="caroline">Caroline</label><input type="radio" name="download" id="caroline" /><br />
<label for="thai">Thai</label><input type="radio" name="download" id="thai" /><br />

<button id="download">Download</button>

<div id="log"></div>