0

I'm having a problem that seems very simple, but still I don't know how to solve it.

So, I have this tag in my HTML file:

<p id="best-individual-text" style="display: inline-block"></p>

For context, I'm building a simple genetic algorithm to evolve a population of individuals (strings) in order to reach a target phrase. In my .js file, I have a loop that creates the new population and finds the best individual of that population, and the loop only stops when one of the individuals is identical to the target phrase.

What I want to do is to update the best-individual-text text content with the string of the best individual in each generation. Since the while loop creates a new population in each iteration, there's going to be a new best individual at every iteration.

Inside this while loop, I have the following line of code:

    document.getElementById("best-individual-text").textContent = getBestIndividual();

Note: getBestIndividual() returns a string

And here lies my problem: the HTML doesn't get updated. The tag remains blank until the loop stops, and only after that the tag is filled with the last best individual.

It works fine if I try this manually, that is, outside of the while loop. My only guess is that the while loop runs too fast for the HTML to be updated. Still, I think I've seen people update the HTML in a while loop, so I really don't understand the reason it is now working.

Also, I've tried making a setInterval instead of a while loop, but it still doesn't work. Even if it did work, it is not of my interest to have any sort of interval for each loop.

What could the problem be, and how can it be fixed?

Thank you in advance!

Here's the github in case anyone needs to see more of the code: https://github.com/pedroheck/genetic-algorithms/tree/main/Word%20Race

Pedro Heck
  • 59
  • 3

1 Answers1

1

I tried out your code, and in the cases I hit where you enter some text, click "Submit", and nothing happens, what is actually happening is that your algorithm is in some sort of infinite, or long-running loop, and it never hits the point where you try to modify the HTML.

You can tell this by simply setting a breakpoint at the line that tries to modify the HTML, and notice that it simply doesn't get hit. Another clue is that the window becomes unresponsive.

My recommendation would be to look closer at your algorithm and try to set some limits. console.log statements will be your friend, because they'll help you see what parts of the code are running the most.

Andrew Stegmaier
  • 3,429
  • 2
  • 14
  • 26
  • Thank you for taking the time to look at my code, Andrew. Indeed, I've noticed that if the target phrase is too long, it seems to loop forever and it becomes unresponsive. However, I don't get why it never hits the point where I try to modify the HTML. If it is inside the loop, shouldn't that line be executed before the next loop? I will keep investigating, but I still don't quite understand how that is possible... – Pedro Heck Oct 26 '21 at 17:16
  • It's weird because if I console.log the textContent that I'm changing, it is clear that it is working. Each iteration shows the best individual, as intended. The tag content is changing, but visually it remains blank... How weird – Pedro Heck Oct 26 '21 at 17:30
  • Ah I see - you want [the DOM update from `updateInfo()`](https://github.com/pedroheck/genetic-algorithms/blob/e47e43f8e7b0147dbf808b02a634a980aa61b61a/Word%20Race/wordrace.js#L175) to be rendered while you're still in the loop - right? I think that's not happening because JavaScript is single-threaded, and the rendering can't occur while your code still has control. Check out this answer for some tips about how to allow this: https://stackoverflow.com/a/17000032/4739687 – Andrew Stegmaier Oct 26 '21 at 17:33