0

I scraped web using Python and wrote images links in text file. Then I'm reading it onload and displaying them on my website. Then I have onclick listener to each image with for loop. But for some reason it's telling me that it's null. Even tough the item exists. IDs and positions in code are correct. script tag is below everything. but it's still doesn't work. Here's my code:

var limit = 42;
var images = 0;

for (let i = 0; i < limit; i++) {
    document.querySelector("#image_meme" + i).onclick = () => { // <---error is here
        localStorage.setItem("AdvancedMode", "false");
        localStorage.setItem("MemeImage", document.getElementById("image_meme" + i).src);
        window.open("https://infosyouneed.netlify.app/memegenerator", "_self");
    }
}

function Reader() {
    fetch('scraps.txt')
        .then(response => response.text())
        .then(text => {
            try {
                while (images < limit) {
                    var div = document.createElement('div');
                    div.id = "meme" + images;
                    div.style.borderRadius = "1%";
                    div.style.width = "200px";
                    div.style.height = "200px";
                    div.style.border = "1px solid";
                    div.style.padding = "0";
                    div.style.margin = "0";
                    var divParent = document.getElementById("memes_container").appendChild(div);
                    var img = new Image();
                    img.id = "image_meme" + images;
                    img.src = text.split("\n")[Math.round(Math.random() * (120 - 0 + 1) + 0)];
                    img.style.width = "100%";
                    img.style.height = "100%";
                    img.style.objectFit = "contain";
                    img.className = "img-fluid";
                    img.alt = images;
                    img.crossOrigin = 'anonymous';
                    divParent.appendChild(img);
                    images++;
                }
            } catch {
                Reader();
            }
        })
}

0 Answers0