I have the following code in the javascript of an html document where there is a list called data where it contains a list of files. I want to change this list by periodically updating it. Is there a way I can access it and change its content through a click of a button?
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" type="text/css" href="mirador-2.6.1/css/mirador-combined.css">
<title>Mirador Viewer</title>
<style type="text/css">
body { padding: 0; margin: 0;}
#viewer {width: 100%; height: 100%; position: fixed; }
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous"/>
</head>
<body>
<div id="viewer"></div>
<script src="mirador-2.6.1/mirador.js"></script>
<script type="text/javascript">
$(function() {
var uri = window.location.toString();
var href = uri.split('id=')[1];
Mirador({
"id": "viewer",
"layout": "1x1",
"mainMenuSettings" :
{
"show": true,
"userLogo": {"label": "IIIF", "attributes": {"href": "http://iiif.io"}},
},
'showAddFromURLBox' : true,
"saveSession": true,
"data": [
{ "manifestUri": "http://localhost:3001/api/manifests/R494Vol1", "location": 'Notarial Archives Valletta'},
{ "manifestUri": "http://localhost:3001/api/manifests/MS588", "location": 'Notarial Archives Valletta'}
],
"windowObjects": [{
"loadedManifest" : "http://localhost:3001/api/manifests/"+href,
"viewType" : "ImageView"}],
/** Testing Annotations **/
annotationEndpoint: {
name: 'Simple Annotation Store Endpoint',
module: 'SimpleASEndpoint',
options: {
url: 'annotation',
storeId: 'comparison',
APIKey: 'user_auth'
}
}
});
});
</script>
</body>
</html></div>