6
\$\begingroup\$

Having so many loops running concurrently obviously can't be good, and the code seems overly complicated. There has to be a simpler, more efficient way to

  1. Turn the designMode of all iFrames on
  2. Find the three "buttons" ('a' link elements) - that when clicked affect its corresponding iFrame - depending on its className
  3. Put those "buttons" into a multidimensional array/object - i.e target.rtfID.x - for easy relationship - i.e "this bold button affects this iFrame
  4. Whenever a "button" is clicked, find its corresponding iFrame through the object and send the iFrame's id as an argument for another function.

    function richText(var1, var2) {
     document.getElementById(var1).addEventListener('click', function() {
      bold(var2);
     }, false);
    }
    function bold(target) {
     if (target != 0) {
      document.getElementById(target).contentDocument.execCommand('bold', false, null); 
      document.getElementById(target).contentWindow.focus();
     } else {
      document.getElementById('richTextField').contentDocument.execCommand('bold', false, null); 
      document.getElementById('richTextField').contentWindow.focus();
     }
    }

    function iFrameOn() {
    var rtfContainer, rtContainer, richTxt, richTxtId,
    rtf = document.querySelectorAll('div > form > iframe'), //Rich Text Field
    newPost = document.getElementById('richTextField').contentDocument.body,
    target = {}, rtfIndex = 0;
    //Turn iFrames On
    while (rtfIndex < rtf.length) {
        rtfID = rtf[rtfIndex].id;
        if (rtf[rtfIndex].contentDocument.designMode != 'On') {rtf[rtfIndex].contentDocument.designMode = 'On';}
        newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";   
        newPost.addEventListener('blur', function() {
            if (newPost.innerHTML == '') {newPost.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";}
        }, false);
        document.getElementById('richTextField').contentWindow.addEventListener('focus', function() {
            if (newPost.innerHTML == "<i style=\"color:#DDDDDD;\">What's up?</i>") {newPost.innerHTML = '';}
        }, false);
        rtContainer = rtf[rtfIndex].nextElementSibling; //Next Element Sibling should be a div
        console.log('rtContainer is: '+rtContainer);
        richTxt = rtContainer.childNodes;
        console.log('richTxt is: '+richTxt);
        for (var i = 0; i < richTxt.length; i++) {
            if (richTxt[i].nodeType != 1 || (richTxt[i].nodeType == 1 && (richTxt[i].className == 'submit_button sbmtPost' || richTxt[i].className == ""))) {continue;}
            richTxtId = richTxt[i].id;
            target.rtfID = {};
            switch (richTxt[i].className) {
                case 'richText bold':
                    if (target.rtfID.bold != richTxtId) {
                        target.rtfID.bold = richTxtId;
                        console.log(target.rtfID.bold+' is associated with: '+rtfID);
                        richText(richTxtId, rtfID);
                    }
                    break;
                case 'richText underline':
                    if (target.rtfID.underline != richTxtId) {
                        target.rtfID.underline = richTxtId;
                        console.log(target.rtfID.underline+' is associated with: '+rtfID);
                    }
                    break;
                case 'richText italic':
                    if (target.rtfID.italic != richTxtId) {
                        target.rtfID.italic = richTxtId;
                        console.log(target.rtfID.italic+' is associated with: '+rtfID);
                        document.getElementById(target.rtfID.italic).addEventListener('click', function() {
                            richText(rtfID);
                        }, false);
                    }
                    break;
                default: 
                    console.log('Error with commenting system!');
            }
        }
        /*var obj = target.rtfID;
        for (var prop in obj) {
            if (obj.hasOwnProperty(prop)) { 
                console.log("prop: " + prop + " value: " + obj[prop]);
                switch(prop) {
                    case 'bold':
                        document.getElementById(obj[prop]).addEventListener('click', function() {
                            richText(obj, prop);
                        }, false);
                        break;
                    case 'underline':
                        document.getElementById(obj[prop]).addEventListener('click', function() {
                            Underline(obj[prop]);
                        }, false);
                        break;
                    case 'italic':
                        document.getElementById(obj[prop]).addEventListener('click', function() {
                            richText(obj, prop);
                        }, false);
                        break;
                    default: 
                        console.log('Error in for...in loop');
                }
            } else {console.log('error');}
        }*/
        rtfIndex++;
    }
    }
\$\endgroup\$

1 Answer 1

2
\$\begingroup\$

There is a quite bit wrong with this code, the loops are possibly the least of it.

  • A ton of commented out code and console.log statements, please clean this up
  • Inconsistent indenting, you indent with 1, 4 or 0 spaces, pick one ( I suggest 2 )
  • The underline button, it does not work
  • The italics button, it does not work either
  • if (rtf[rtfIndex].contentDocument.designMode != 'On') {rtf[rtfIndex].contentDocument.designMode = 'On';}
    can be replaced with
    rtf[rtfIndex].contentDocument.designMode = 'On';
  • "<i style=\"color:#DDDDDD;\">What's up?</i>" should be a constant
  • This: document.querySelectorAll('div > form > iframe') seems awfully optimistic, are you sure that you will never use iframes for anything else? I would suggest you find a more reliable means to find the richtext iframes.
  • I am not sure why you would want to put the buttons in an array, once you wire them you should no longer care about them
  • You can link buttons and their corresponding iFrame through a closure: http://javascript-reference.info/javascript-closures-for-dummies.htm, which seems pretty much what the commented-outcode did.
\$\endgroup\$
1
  • \$\begingroup\$ The array was just to link the button to its iFrame. I saw no other way of doing this. The commented out code and console.log statements were for debugging purposes. The richtext iFrames will always be within a form element, which will always be within a div. I did it this way specifically so iFrames used in the usual manner would not be affected. As for the indents, that's how I do in my editor so my apologies for that. Thanks for your help, and I hope this all explains my reasoning for doing things certain ways. \$\endgroup\$
    – Elitis
    Jan 27, 2014 at 21:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.