To start, I'm new to JS and I'm working through this problem and had nowhere else to turn.
I'm working with modernizr to switch image sources to and from .webp to speed up website loading. basically, my problem is with variable scope and setting the sources of the images in an empty array.
The code looks like this:
<script>
/*! modernizr 3.6.0 (Custom Build) | MIT *
* https://modernizr.com/download/?-webp-setclasses !*/
!function(e,n,A){function o(e){var n=u.className,A=Modernizr._config.classPrefix||"";if(c&&(n=n.baseVal),Modernizr._config.enableJSClass){var o=new RegExp("(^|\\s)"+A+"no-js(\\s|$)");n=n.replace(o,"$1"+A+"js$2")}Modernizr._config.enableClasses&&(n+=" "+A+e.join(" "+A),c?u.className.baseVal=n:u.className=n)}function t(e,n){return typeof e===n}function a(){var e,n,A,o,a,i,l;for(var f in r)if(r.hasOwnProperty(f)){if(e=[],n=r[f],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(A=0;A<n.options.aliases.length;A++)e.push(n.options.aliases[A].toLowerCase());for(o=t(n.fn,"function")?n.fn():n.fn,a=0;a<e.length;a++)i=e[a],l=i.split("."),1===l.length?Modernizr[l[0]]=o:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=o),s.push((o?"":"no-")+l.join("-"))}}function i(e,n){if("object"==typeof e)for(var A in e)f(e,A)&&i(A,e[A]);else{e=e.toLowerCase();var t=e.split("."),a=Modernizr[t[0]];if(2==t.length&&(a=a[t[1]]),"undefined"!=typeof a)return Modernizr;n="function"==typeof n?n():n,1==t.length?Modernizr[t[0]]=n:(!Modernizr[t[0]]||Modernizr[t[0]]instanceof Boolean||(Modernizr[t[0]]=new Boolean(Modernizr[t[0]])),Modernizr[t[0]][t[1]]=n),o([(n&&0!=n?"":"no-")+t.join("-")]),Modernizr._trigger(e,n)}return Modernizr}var s=[],r=[],l={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var A=this;setTimeout(function(){n(A[e])},0)},addTest:function(e,n,A){r.push({name:e,fn:n,options:A})},addAsyncTest:function(e){r.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=l,Modernizr=new Modernizr;var f,u=n.documentElement,c="svg"===u.nodeName.toLowerCase();!function(){var e={}.hasOwnProperty;f=t(e,"undefined")||t(e.call,"undefined")?function(e,n){return n in e&&t(e.constructor.prototype[n],"undefined")}:function(n,A){return e.call(n,A)}}(),l._l={},l.on=function(e,n){this._l[e]||(this._l[e]=[]),this._l[e].push(n),Modernizr.hasOwnProperty(e)&&setTimeout(function(){Modernizr._trigger(e,Modernizr[e])},0)},l._trigger=function(e,n){if(this._l[e]){var A=this._l[e];setTimeout(function(){var e,o;for(e=0;e<A.length;e++)(o=A[e])(n)},0),delete this._l[e]}},Modernizr._q.push(function(){l.addTest=i}),Modernizr.addAsyncTest(function(){function e(e,n,A){function o(n){var o=n&&"load"===n.type?1==t.width:!1,a="webp"===e;i(e,a&&o?new Boolean(o):o),A&&A(n)}var t=new Image;t.onerror=o,t.onload=o,t.src=n}var n=[{uri:"data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=",name:"webp"},{uri:"data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==",name:"webp.alpha"},{uri:"data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",name:"webp.animation"},{uri:"data:image/webp;base64,UklGRh4AAABXRUJQVlA4TBEAAAAvAAAAAAfQ//73v/+BiOh/AAA=",name:"webp.lossless"}],A=n.shift();e(A.name,A.uri,function(A){if(A&&"load"===A.type)for(var o=0;o<n.length;o++)e(n[o].name,n[o].uri)})}),a(),o(s),delete l.addTest,delete l.addAsyncTest;for(var p=0;p<Modernizr._q.length;p++)Modernizr._q[p]();e.Modernizr=Modernizr}(window,document);
</script>
<script>
let imagesornot = [];
Modernizr.on('webp', function(result) {
if (result) {
imagesornot = ['https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal1.webp?v=1595534871429',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal2.webp?v=1595534875205',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal3.webp?v=1595534879142',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal4.webp?v=1595534876818',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal5.webp?v=1595534878825',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal6.webp?v=1595534871344',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal7.webp?v=1595534871504',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal8.webp?v=1595534873717',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal9.webp?v=1595534870152',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal10.webp?v=1595534879559',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal11.webp?v=1595534881443',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal12.webp?v=1595534871717',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal13.webp?v=1595534872813',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal14.webp?v=1595534871632',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal15.webp?v=1595534873058',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal16.webp?v=1595534872744',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal17.webp?v=1595534878192',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal18.webp?v=1595534881444',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal19.webp?v=1595534875846',
'https://cdn.glitch.com/4ead142d-246b-4550-8218-d7130a244dd5%2Fpersonal20.webp?v=1595534873320'];
console.log('webp supported!!!');
} else {
imagesornot = ['https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F1.jpg?v=1592359818160',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F2.jpg?v=1592359846105',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F3.jpg?v=1592359853602',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F4.jpg?v=1592359832791',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F5.jpg?v=1592359855106',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F6.jpg?v=1592359811311',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F7.jpg?v=1592359798911',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F8.jpg?v=1592359813220',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F9.jpg?v=1592359796677',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F10.jpg?v=1592359838355',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F11.jpg?v=1592359856005',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F12.jpg?v=1592359799909',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F13.jpg?v=1592359807718',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F14.jpg?v=1592359800816',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F15.jpg?v=1592359802183',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F16.jpg?v=1592359804323',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F17.jpg?v=1592359832924',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F18.jpg?v=1592359839887',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F19.jpg?v=1592359847898',
'https://cdn.glitch.com/04361456-6f86-4ef7-b7f9-c7534267cc09%2F20.jpg?v=1592359805910'
];
}} )
console.log(imagesornot); //why does this log as an empty array??
</script>
Really, what I'm wondering is why this array logs as an empty array after it's been populated, and also how do I fix this?
