I'm getting started on learning the Django Framework for my project.

I'm currently trying to get this new functionnality to work. I know what i need to do but i don't know how to do it.

Display image (the iframe src is empty so that's why the firefox error message

I'm creating ,for each element of an array, a button. Each of those elements have a txt file that i want to display on this iframe (below those buttons).

This image shows, in this case, three buttons ( 3 elements in the array). What i want to do is ,when i click on one of those buttons, it will change the src of the iframe to match the current index of the array (it will point to the src of a element). It will then show the content of the txt file on the iframe.

JS:

function createHeader() {
let iframe = document.getElementById("iframe-overplot")
let buttons = document.querySelectorAll("div > div > div > button");
console.log(buttons);
for (let i = 0; i < spectra_list.length; i++) { // the array
    let button = document.createElement("button");
    button.innerText = " ";
    button.style.backgroundColor = colors[i];
    button.classList.add("h-10", "py-1", "text-xl", "text-gray-100", "font-medium", "transition-colors", "hover:text-gray-900", "focus:outline-none", "display:inline-block", "flex-row", "w-1/2");
    div_header.appendChild(button);
    button.addEventListener("click", function (){
        // change the iframe src to "i" index
    })

}

}

HTML:

<div class="relative w-1/2 flex flex-col mr-1 border border-gray-400" id="div_header_iframe">
        <div class="w-full flex flex-row" id = "div_header_buttons">
        </div>
        <iframe class ="h-full rounded-r bg-gray-50 flex-col" src = "..." id ="iframe_overplot"></iframe>
</div>

I tried to do a new def on views.py:

def get_headers_spectrum(request):
spectra_list = SyntheticSpectra.objects.values('spec_type', 'collection', 'short_name').filter(
    calc_key__in=request.POST.getlist('spectra'))

   return '/' + 'pollux' + '/' + spectra_list.spec_type + '/'+ get_spectra_list.collection + '/' + 'FlatTable' + '/' + spectra_list.shortname + '.txt'

I added it to urls.py:

path('my-spectra/overplot/get_headers_spectrum', views.get_headers_spectrum, name='get_headers_spectrum'),

Right now, i know what i want to do but i don't know how to make all of that work together. If you don't understand something, let me know !