Javascript appendChild(script) works only one time

StackOverflow https://stackoverflow.com/questions/20098239

Question

I'm trying to create two separate HTML documents: main.html and sufler.html. Idea is to control sufler.html page from main.html . So far I succeeded to write text and change it's font style. But font style changes only ONE time...

I need it to be able to change many times, can't understand what is going on, because, as I understanding, every time I calling function writing(), I'm clearing all new document's content with newDoc.body.innerHTML = ''... but it seems that not... although text is changing every time.

main.html

<html>
<head>
<script type="text/javascript">
var HTMLstringPage1     = '<!DOCTYPE html><html><head><link href="stilius.css" rel="stylesheet" type="text/css" /></head><body>',
    HTMLstringPage2     = '</body></html>',
    HTMLstringDiv1      = '<div id="sufler"><div id="mov"><p id="flip">',
    HTMLstringDiv2      = '</p></div></div>';

//NEW WINDOW OPEN--------------------------------------------------------------------------------------------------------
var newWindow   = window.open('suffler.html','_blank','toolbar=no, scrollbars=no, resizable=no, height=615,width=815'); 
var newDoc      = newWindow.document;
                  newDoc.write(HTMLstringPage1,HTMLstringDiv1+'Text'+HTMLstringDiv2,HTMLstringPage2);
var script      = newDoc.createElement("script");
                  script.type = "text/javascript";
//=======================================================================================================================

//WRITING----------------------------------------------------------------------------------------------------------------
function writing(){
    newText =   document.getElementById("sel-1").value.replace(/\n/gi, "</br>");
    fontas=     document.getElementById("textFont").value;
    size=       document.getElementById("textSyze").value;
    stylas=     document.getElementById("textStyle").value;
    syntax=     document.getElementById("textSyntax").value;

    newDoc.body.innerHTML = '';//clears old text (should clear old scripts and functions too)
    newDoc.write(HTMLstringPage1,HTMLstringDiv1,newText,HTMLstringDiv2,HTMLstringPage2);//writes new text (and new scripts and functions)
    
var text        = newDoc.createTextNode('document.getElementById("flip").style.font="'+stylas+' '+syntax+' '+size+'px '+fontas+'";');
    script.appendChild(text);
    newDoc.getElementsByTagName("body")[0].appendChild(script);
}
//=======================================================================================================================
</script>
</head>
<body>
    <button type="button" style="background-color: #F5FF25;" onclick="writing()">Apply     text</button>
</body>
</html>
Was it helpful?

Solution

Any one node can only be added to the document once. You only define script once but trying to add it to the DOM multiple times. Put the var script = ... line inside writing().

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top