0

I'm trying to write a little extension which changes all links with a specific string and then sets the font color to red/yellow/green. I first tried only changing the first link I find and everything worked great (faster for debugging), now that I removed the break statement something weird happens.

If I let my program search through all links nothing changes. But if I set it to stop at a certain string which I know should be changed it only changes the last one and nothing else. So it kinda seems like every time I try to manipulate a link every progress is gone. But this reset only happens in the threads handling a http request. In my main loop through all the links I initially set every string to the color red and that doesn't change. Any ideas? Here's the code:

var links = document.getElementsByTagName("a");
$(document).ready(function() {
    "use strict";
    var links = document.getElementsByTagName("a");
    for(let i=0;i<links.length;i++){
        if(links[i].toString().includes("/anime/")) {
            //Color red
            links[i].innerHTML = "<font color=\"" + red + "\">" + links[i].innerHTML + "</font>";

            var searchURL = "http://random.url";

            var client = new XMLHttpRequest();
            client.onload = function () {
                firstRequestHandler(client, i);
            };
            client.open("GET", proxerSearchURL);
            client.send();      
        }    
    }
});

function firstRequestHandler(client, index) {
    if (client.status == 200 && client.responseText != "")
    {
        var response = client.responseText;

        //Color green
        links[index].innerHTML = hrefLink.innerHTML.replace(red, green);
    }
}

After this piece of code every link is red. If I set a break statement directly after "client.send();" the last link it "worked on" is colored green, every link before that is red and every link after that is unchanged (obviously).

EDIT: Tried fixing closure issue by using "let" in "strict mode" but it still doesn't work. Am I missing something? Also made links global because I thought it might help as well? Doesn't tho... Javascript is weird...

DropOfBlood
  • 23
  • 1
  • 9
  • Ah, the lurking dangers of closures.. It has to do with your `links[i]` – Xan Jul 19 '15 at 15:00
  • Thanks for marking as duplicate and showing me what to search for. Sometimes not that easy when using the wrong search terms :D – DropOfBlood Jul 19 '15 at 15:09
  • No problem; it's one of those standard JavaScript's "gotchas". – Xan Jul 19 '15 at 15:10
  • Normally, when the question is closed, it's _closed_, since nobody can answer answer anymore. You should go the first route: make a function dependent on `i` that will _return_ the function `function(){firstRequestHandler(client, i);}` – Xan Jul 19 '15 at 15:45
  • Sorry, didn't know that since "If those answers do not fully address your question, please edit this question[...]" but I'll have a look at it I'm sure I can figure something out. Just thought I'd better ask quick before everyone's gone :P – DropOfBlood Jul 19 '15 at 15:51

0 Answers0