Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Sep 2010
    Posts
    331
    Thanks
    9
    Thanked 6 Times in 6 Posts

    Revising function to add event listeners to multiple elements

    Currently, I have a three step (three for loops) system for handling form input. The first turns design mode on, on all iframes (there will always be at least 1). Second step is to handle rich text (Which is where the problem lies) - bold, italics, and underlining. Third step is submitting through AJAX.

    Setting designMode to on, on each iframe works fine. But I can't seem to get the rich text handling to work, so I figured there must be a better way to do this. So, how could I revise this system to work better (And work period)? Anything else you need to know, feel free to ask.

    Code:
    function iFrameOn() { 
    	var iFrames = document.querySelectorAll('form > iframe'); //Get all iframes in forms
    	for (var iFIndex = 0, ifid; iFIndex < iFrames.length; iFIndex++) { //Turn Design Mode on on all iFrames if not on already
    		ifid = iFrames[iFIndex].id;
    		if (iFrames[iFIndex].contentDocument.designMode != 'On') {iFrames[iFIndex].contentDocument.designMode = 'On';}
    		document.getElementById('richTextField').contentDocument.body.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";	
    		document.getElementById('richTextField').contentDocument.body.addEventListener('blur', function() {
    			if (document.getElementById('richTextField').contentDocument.body.innerHTML == "") {
    				document.getElementById('richTextField').contentDocument.body.innerHTML = "<i style=\"color:#DDDDDD;\">What's up?</i>";
    			}
    		}, false);
    		document.getElementById('richTextField').contentWindow.addEventListener('focus', function() {
    			if (document.getElementById('richTextField').contentDocument.body.innerHTML == "<i style=\"color:#DDDDDD;\">What's up?</i>") {
    				document.getElementById('richTextField').contentDocument.body.innerHTML = '';
    			}
    		}, false);
    	}
    	for (var rtIndex = 0; rtIndex < document.getElementsByClassName('richText').length;rtIndex++) { //Rich text event listeners
    		if (document.getElementsByClassName('richText')[rtIndex].className == "richText bold") { //Bold text event listener
    			var rtid = document.getElementsByClassName('richText')[rtIndex].id;
    			var targetiFrame = document.getElementById(rtid).getAttribute('data-pstid'); 
    			document.getElementsByClassName('richText')[rtIndex].addEventListener('click', function() {	
    				if (targetiFrame != 0) {iBold(targetiFrame);}
    				else {
    					document.getElementById('richTextField').contentDocument.execCommand('bold', false, null); 
    					document.getElementById('richTextField').contentWindow.focus();
    				}
    			}, false);
    		} else if (document.getElementsByClassName('richText')[rtIndex].className == 'richText underline') { //Underline text event listener
    			document.getElementsByClassName('richText')[rtIndex].addEventListener('click', function() {
    				if (targetiFrame == 0) {
    					document.getElementById('richTextField').contentDocument.execCommand('underline', false, null); 
    					document.getElementById('richTextField').contentWindow.focus();
    				} else {iUnderline(targetiFrame);}
    			}, false);
    		} else if (document.getElementsByClassName('richText')[rtIndex].className == 'richText italic') { //Italic text event listener
    			document.getElementsByClassName('richText')[rtIndex].addEventListener('click', function() {
    				if (targetiFrame == 0) {
    					document.getElementById('richTextField').contentDocument.execCommand('italic', false, null); 
    					document.getElementById('richTextField').contentWindow.focus();
    				} else {iItalic(targetiFrame);}
    			}, false);
    		}	
    	}
    	for (var sbmtIndex = 0;sbmtIndex < document.getElementsByClassName('sbmtPost').length;sbmtIndex++) { //Event listener for submitting posts or comments
    		var iSubmt = document.querySelectorAll('form > div')[sbmtIndex];
    		document.querySelectorAll('form > div > .sbmtPost')[sbmtIndex].addEventListener('click', function() {
    			var pstData = iSubmt.querySelector('form > div > .sbmtPost').getAttribute('data-cmtid');
    			var cPrntID = iSubmt.querySelector('form > div > .sbmtPost').getAttribute('data-pstid');
    			sendData(pstData, cPrntID); //Post Data (data being the id) and Comment Parent Id. Comments are posts. Variables only used for comments
    		}, false); 
    	}
    }
    Coding is a challenge, get used to it
    Always remember to debug
    Try the guess & check method
    Break it down into simple steps

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,037
    Thanks
    0
    Thanked 250 Times in 246 Posts
    Why not attach the event handler to a single element, that is to the parent element of the bold, italics and underline buttons? Then in the event handler, you can detect which button was clicked. That is way more efficient than to attach the handler to all buttons.

    Code:
    document.querySelector('selector for the parent').addEventListener('click', function(e) {
        var className = e.target.className;
        if (className.indexOf('bold') != -1) {
            //bold
        } 
        else if (className.indexOf('italics') != -1) {
            //italics
        }
        else if (className.indexOf('underline') != -1) {
            //underline
        }
    }, false);
    Btw, your code has tons of repeated calls to the same object/element. You should cache the references to local variables for efficiency, performance, readability and maintainability.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •