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 toTurn the designMode of all iFrames onFind the three buttons ('a' link elements) - that when clicked affect its corresponding iFrame - depending on its classNamePut those buttons into a multidimensional array/object - i.e target.rtfID.x - for easy relationship - i.e this bold button affects this iFrameWhenever 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++;    }    }
Rich Text on multiple iFrames
javascript;optimization;performance;html
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 upInconsistent indenting, you indent with 1, 4 or 0 spaces, pick one ( I suggest 2 )The underline button, it does not workThe italics button, it does not work eitherif (rtf[rtfIndex].contentDocument.designMode != 'On')        {rtf[rtfIndex].contentDocument.designMode = 'On';}can be replaced withrtf[rtfIndex].contentDocument.designMode = 'On';<i style=\color:#DDDDDD;\>What's up?</i> should be a constantThis: 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 themYou 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.