I am trying to update some early JS in an old app. This is a wallpaper app. Clicking on a thumbnail makes the wallpaper appear in a new page, and the user uses their phone to capture the screen to use it. Tapping on the image returns to the previous page of thumbnails.
The JS pulls the image information when onclick, which triggers a function that places that information into localStorage, then calls a function to open a new page, wp_Show.html. (wp = wallpaper.) wp_Show.html pulls the information from localStorage to populate the page.
For some reason the image’s folder name and image name isn’t being pulled from localStorage. Both are returned as null. There is no error message in the console, but Firefox’s Inspector shows src=null/null.jpg.
<script>
function grabFilename(filename, size, color) {
// var filename, size, color;
if (color.length < 1) {color = "black";}
var mainFolder = "0buggies/0racing-buggies"; // URL to this page
var mainHtml = "/0racing-buggies.html"; // this page
localStorage.setItem('wpMainFolder', mainFolder);
localStorage.setItem('wpMainHtml', mainHtml);
localStorage.setItem('wpName', filename);
// localStorage.setItem('screenSize', size);
// localStorage.setItem('bgColor', color);
window.location="../../wp_Show.html";
}
</script>
In wp_Show.html:
<script>
var mainHtml = localStorage.getItem('wpMainHtml'); // /0racing-buggies.html
var folder = localStorage.getItem('wpMainFolder'); // 0buggies/0racing-buggies
var image = localStorage.getItem('wpName'); //2015_Race-offroad1-sm
/* var size = localStorage.getItem('screenSize'); // 640
var bgColor = localStorage.getItem('bgColor'); // black
var bColor = document.getElementById("bodyColor");
bColor.style.backgroundColor = bgColor;
*/
var output = document.getElementById("output");
output.innerHTML = "<a href='" + folder + mainHtml + "'><img alt='' src = '" + folder + "/" + image + ".jpg' width='100%' /></a>";
</script>
