Browser Invalid Document.write ()
I am honestly not sure if I have named this question correctly, because I cannot identify the problem. Also, keep in mind that I still have a lot to learn about evolutionary algorithms, and I don’t own any means.
Below is the code for a simple genetic algorithm, if you even want to call it. It misses a few features of a real, complete genetic algorithm, but this is just an example of a demonstration. All it does is take a string (predefined by me, in this case) and change it, one character at a time, until the string becomes "Hello, world!" Take a look:
var source2 = "og834tnUEF*bt"; //random string
var target2 = "Hello, world!";
function fitness(source, target) {
var fitval = 0;
for(var i = 0; i < source.length; i++) {
fitval += Math.pow(target.charCodeAt(i) - source.charCodeAt(i), 2);
} return (fitval);
}
function mutate(source) {
var charpos = Math.floor(Math.random() * source.length);
parts = source.split("");
var temp = String.fromCharCode(source.charCodeAt(charpos) + (Math.random() < 0.5 ? -1 : 1));
parts[charpos] = temp;
return (parts.join(""));
}
//functions end
var fitval = fitness(source2, target2);
var p = 0;
while(true) {
p += 1;
mutant = mutate(source2);
mutFit = fitness(mutant, target2);
if (mutFit < fitval) {
fitval = mutFit;
source2 = mutant;
document.write(p + " : " + mutFit + " : " + mutant + "<br />");
} if (fitval === 0) break;
}
I don't think that the description of the algorithm is too much, because I have no problem with the code. This line is here:
document.write(p + " : " + mutFit + " : " + mutant + "<br />");
seems to be giving me problems. Although the line break is included at the end, the output in the browser is grouped every time in that time for no reason. Check out the JSFiddle here: https://jsfiddle.net/oaahzsuf/
Notice that the output becomes bound? I've found that grouping seems to happen every time the semicolon is mutated, but I don't know what that has to do with anything. Any idea what the problem is? I feel like I am missing something simple, so any help is appreciated.
source to share
If you take console.log
every line you add to the output div, you will notice some of them break tags <br>
because they contain HTML characters like <
and innerHTML
trying to parse the line into HTML (I checked jsFiddle where you are using innerHTML). This same problem occurs with document.write
.
The simplest solution is to add the tag <br>
to the second concat operation.
Like this:
https://jsfiddle.net/oaahzsuf/1/
output.innerHTML += (p + " : " + mutFit + " : " + mutant);
output.innerHTML += '<br />';
If there is a chance your string will contain a complete tag <>
, you can do this:
output.innerText += (p + " : " + mutFit + " : " + mutant);
output.innerHTML += '<br />';
innerText
threatens the line like normal text.
The third option uses tags <pre>
around your string:
https://jsfiddle.net/oaahzsuf/4/
output.innerHTML += (p + " : " + mutFit + " : <pre>" + mutant + "</pre><br />");
And the fourth option is string escaping like @Joe.
Also, a call document.getElementById
that many times in a loop may not be the best. Just keep the link to your output
div outside of the loop.
The random character generator outputs the character <
!
Perhaps your character generator will behave by only allowing it to create valid characters that would actually be your output.
If you really need these characters, then remove the html objects like this:
function htmlEscape(str) {
return String(str)
.replace(/&/g, '&')
.replace(/"/g, '"')
.replace(/'/g, ''')
.replace(/</g, '<')
.replace(/>/g, '>');
}
...
document.write(p + " : " + htmlEscape(mutFit) + " : " + htmlEscape(mutant) + "<br />");
Also, don't use document.write
.
If you've executed the page after the page has fully loaded , you can add output to the element <body>
.
document.addEventListener("DOMContentLoaded", function(event) {
var documentBody = document.getElementsByTagName('body')[0];
//do work
documentBody.innerHTML += p + " : " + mutFit + " : " + mutant + "<br />";
});
source to share