I am encountering an issue while running a code that generates content using a function. The problem arises when I try to change the content onclick, as none of the CSS is applied again after the change. It's quite perplexing.
Below is a generalized example of my code:
function flush(divId) {
$(divId).parentNode.removeChild(divId);
}
function makeContent(arg1,arg2,arg3) {
document.write('<div class="exampleClass" id="' + arg1 + 'Id">');
if(arg3 < 1000) {
if (arg2 != "ArbritraryArg") {
document.write('<span class="spanLink" onclick="flush(\'' + arg1 + 'Id\')\; makeContent(\'' + arg1 + '\',\'Something\',' + arg3 + ')\;">Blarg</span>');
} else {
document.write('<span class="spanLink" onclick="flush(\'' + arg1 + 'Id\')\; makeContent(\'' + arg1 + '\',\'SomethingElse\',' + arg3 + ')\;">Yearg</span>');
}
}
var i = 0;
var mdArray = eval(arg1 + 'Id' + arg3);
do {
document.write('<div class="exampleClass2">' + mdArray[i][0] + '</div><div class="exampleClass3">' + mdArray[i][1] + '</div>');
i++;
} while (i < mdArray.length);
document.write('</div>');
var parentDiv = document.getElementById('parentDiv');
parentDiv.insertBefore(monster + 'Set',parentDiv.firstChild);
}
document.write('<div id="parentDiv">');
makeContent('Arg1','Something',Arg3);
document.write('</div>');
My concern is that when I test this script in a .html file, everything works perfectly on the first execution of makeContent() by the script itself. However, subsequent executions show a different behavior. The flush() function seems to work fine independently, removing only the makeContent() data and leaving other HTML elements intact.
When I click on the <span> link generated in line 9 of the code snippet above, the content changes but the necessary CSS is not reapplied. Moreover, all other content in the HTML document disappears as well. What could be causing this? The same issue persists even when testing with external links similar to how I tested flush().
In case you're curious, here's how the HTML page looks:
<html><head><title>Testing</title>
<link rel="stylesheet" href="stylesheet.css">
</head><body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,...</p>
<script href="script.js"></script>
<p><span class="spanLink" onclick="flush('Arg1Id');">Get rid of the content (TEST)</span></p>
<p><span class="spanLink" onclick="flush('Arg1Id'); makeContent('Arg1','Arg2',Arg3);">Try regenerating the content (TEST)</span></p>
</body></html>
Any assistance would be greatly appreciated!
Edit: I just noticed that on the test.html file, when attempting to regenerate the content, the title changes from "Testing" to "test.html". Could the newly generated content be affecting all HTML elements in the file?