Rich Text on multiple iFrames

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

• Turn the designMode of all iFrames on

• Find the three "buttons" ('a' link elements) - that when clicked affect its corresponding iFrame - depending on its className

• Put those "buttons" into a multidimensional array/object - i.e target.rtfID.x - for easy relationship - i.e "this bold button affects this iFrame

• 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 What's up?";
newPost.addEventListener('blur', function() {
if (newPost.innerHTML == '') {newPost.innerHTML = "What's up?";}
}, false);
document.getElementById('richTextField').contentWindow.addEventListener('focus', function() {
if (newPost.innerHTML == "What's up?") {newPost.innerHTML = '';}
}, false);
rtContainer = rtf[rtfIndex].nextElementSibling; //Next Element Sibling should be a div
console.log('rtContainer is: '+rtContainer);
ri

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';

• "What's up?" 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.

StackExchange Code Review Q#40072, answer score: 2