Jump to content

getElementByTagName insersion

shadowayex

By shadowayex
in JavaScript

Recommended Posts

shadowayex Invested Member

shadowayex

Posted
Posted

I'm building a JavaScript text editor that will generate a page without having to save the file. It works 99.9% of what I current want it to. It writes everything like it should, but the JavaScript it places on the page (although placed perfectly correct) will not do anything. I do not know why this is, but it's annoying me beyond belief. Here's the code I'm working with:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">    <head>        <title>Text Editor (Version 2)</title>        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />        <script type="text/javascript" src="tabaction/tabs1.js"></script>        <script type="text/javascript" src="tabaction/tabs2.js"></script>        <style type="text/css">            body       {font-family: lucida console;}            textarea   {width: 100%;}            .hidden    {height: 0px;                        overflow: hidden;                        visibility: hidden;}            p          {margin: 0px;                        padding: 0px;}        </style>        <script type="text/javascript">            function openPage() {                var features="status=no,scrollbars=yes,resizable=yes,menubar=yes,width=2000,height=2000,top=0,left=0";                var openit = window.open("texteditorV2.html", "", features);                openit.onload = function() {                    openit.document.getElementsByTagName("title")[0].innerHTML = document.getElementById("pagetitle").value;                    openit.document.getElementsByTagName("style")[0].innerHTML = document.getElementById("pagecss").value;                    openit.document.getElementsByTagName("script")[2].innerHTML = document.getElementById("pagejs").value;                    openit.document.body.innerHTML = document.getElementById("pagebody").value;                }            }            function editor(section, action) {                if(action == "open") {                    document.getElementById(section + "edit").className = "";                    document.getElementById(section + "link").className = "hidden";                }                if(action == "saveclose") {                    document.getElementById(section + "edit").className = "hidden";                    document.getElementById(section + "link").className = "";                }                if(action == "clear") {                    document.getElementById(section).value = "";                }                if(action == "clearclose") {                    document.getElementById(section).value = "";                    document.getElementById(section + "edit").className = "hidden";                    document.getElementById(section + "link").className = "";                }            }        </script>    </head>    <body>        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />        <br />        <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />        <head><br />        <title><input type="text" id="pagetitle" value="" /></title><br />        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><br />                <style type="text/css"><br />                    <div class="hidden" id="pagecssedit">                        <textarea cols="" rows="10" onkeydown="return interceptTabs(event, this);" id="pagecss"></textarea><br />                        <input type="button" value="Save" />                        <input type="button" onclick="editor('pagecss', 'saveclose');" value="Save and Close" />                        <input type="button" onclick="editor('pagecss', 'clear');" value="Clear" />                        <input type="button" onclick="editor('pagecss', 'clearclose');" value="Clear and Close" />                    </div>                    <p id="pagecsslink"><a href="java script: void(0);" onclick="editor('pagecss', 'open');" />Edit CSS</a></p>                </style><br />                <script type="text/javascript"><br />                    <div class="hidden" id="pagejsedit">                        <textarea cols="" rows="10" onkeydown="return interceptTabs(event, this);" id="pagejs"></textarea>                        <input type="button" value="Save" />                        <input type="button" onclick="editor('pagejs', 'saveclose');" value="Save and Close" />                        <input type="button" onclick="editor('pagejs', 'clear');" value="Clear" />                        <input type="button" onclick="editor('pagejs', 'clearclose');" value="Clear and Close" />                    </div>                    <p id="pagejslink"><a href="java script: void(0);" onclick="editor('pagejs', 'open');" />Edit JavaScript</a></p>                </script><br />            </head><br />            <body><br />                <div class="hidden" id="pagebodyedit">                    <textarea cols="" rows="10" onkeydown="return interceptTabs(event, this);" id="pagebody"></textarea>                    <input type="button" value="Save" />                    <input type="button" onclick="editor('pagebody', 'saveclose');" value="Save and Close" />                    <input type="button" onclick="editor('pagebody', 'clear');" value="Clear" />                    <input type="button" onclick="editor('pagebody', 'clearclose');" value="Clear and Close" />                </div>                <p id="pagebodylink"><a href="java script: void(0);" onclick="editor('pagebody', 'open');" />Edit Body</a></p>            </body><br />         </html><br />        <input type="button" onclick="openPage();" value="Load Page" />    </body></html>

The external js files are used to generate tabs in text areas and don't affect the final outcome of the page besides the format of the code written. If anyone needs to see those, ask and I'll post them. Other than that, this page is all the code used for the editor. Can anyone tell me why it's not loading the JavaScript?

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

When you add Javascript to a page using the innerHTML property of an element, you're not telling the browser to execute any code. You're just saying that you have some text content that you want to add to an element. If you want the Javascript to actually get executed, there are other things you need to do. If you have an external script file that you want to attach, I've seen some inline code (like Google's) add a new script element to the page using document.write with a src on the script element, which the browser does go out and retrieve and execute. If it's not an external script file, just normal inline code, you probably have to use a regular expression to extract the code from the rest of the HTML markup and then use eval to execute it. There might be other ways as well.

Link to comment
Share on other sites
jeffman w3schools Guru

jeffman

Posted
Posted

Seems to vary with the browser. I ran your HTML with my own "blank" document as source for the new window. FF ran the code as if it were loading the script for the first time. An inline alert popped right up. I didn't expect that, but it did. window.onload was ignored, as I expected, since the window was already loaded. But that meant I couldn't use the script to associate buttons with functions. Maybe if I'd placed the script at the bottom of the body. I DID just put an onclick handler right in a button tag, and it called the function correctly.Safari and Opera refused to play ball at all. Not even the body text got changed.

Link to comment
Share on other sites
shadowayex Invested Member

shadowayex

Posted
  • Author
Posted

OK, well now that you guys know the concept of my program, I would like to ask a couple questions regarding it:1) Am I taking the right approach? I figured a full-scale JavaScript program for this job would be a great route to take, since I'm only beginning C++ programming and have no idea how to build any sort of graphical interface for it as of right now (otherwise I'd build a C++ program, but I love C++. I might try C sometime, if anyone has any tutorials. Which is better?). Anyways, it's also helping me build more efficiently. If you guys want, I can post my V1 code, and you can compare the code. V2 is like half the amount :). But if there's a better route to go, let me know.2) If I am to stick with JavaScript, how does my coding look to you guys? Is there anything I should look up to make it work a little better (of course, I need to fix the bug that is hindering me so far), and any functions I should look into that will make the program better. I plan to have a "View Source" function, since (over here at least) I can't see the actual course of the page being shown, only the page it was opened in. I also plan on making a "Save Source" to save the source in a txt file, and a "Save File" option with a drop down menu to choose the extention. I'm not sure if JavaScript will do this for me, but I feel it's worth a shot. I'm sure if I can learn to make a graphical interface with C++ I could easily build the functions that way (I love C++ :)).

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...