Make JavaScript Var URL be interchangeable

Question

I have a code that lets me execute a PDF file on a page. The link in the var is executed by a function.

var url = 'myurl.com'; 

pdfjsLib.getDocument('https://api.codetabs.com/v1/proxy?quest=' + url).promise.then(function(pdfDoc_) {
    pdfDoc = pdfDoc_;
    pages = parseInt(pdfDoc.numPages);
    var canvasHtml = '';
    for (var i = 0; i < pages; i++) {
        canvasHtml += '<canvas id="canvas_' + i + '"></canvas>';
    }

I want to create buttons that replace the link in the var URL. So I can load different PDF's inside the same page.

Answer 1

How about make a function that has a parameter of url and it loads the pdf?
And call it when buttons are clicked.

function loadPDFwithURL(url) {
    pdfjsLib.getDocument('https://api.codetabs.com/v1/proxy?quest=' + url).promise.then(function(pdfDoc_) {
        pdfDoc = pdfDoc_;
        pages = parseInt(pdfDoc.numPages);
        var canvasHtml = '';
        for (var i = 0; i < pages; i++) {
            canvasHtml += '<canvas id="canvas_' + i + '"></canvas>';
        }
    }
    // do the same stuff
}

html:

<button onclick="loadPDFwithURL('myurl.com');">Load PDF</button>