Setting up a function with Ctrl+Click and passing a value

[Mr Initial Man]

My code thus far:

function addBreak(e){
    $el = {
        orig_el_nm:'To Be Added',
        selector:'Not yet set'
    }
    if(e.ctrlKey){
        alert('Clicked Element: ' + $el.orig_el_nm + '\r\n\r\n Selector: ' + $el.selector + ',');
    }
}

var $el_names = new Array(
    'img',
    'div',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'p',
    'li',
    'dt',
    'tr',
    'caption'
);
var $break_els = new Array();

for(var $i = 0; $i < $el_names.length; $i++){
    var $el_list = document.getElementsByTagName($el_names[$i]);
    for(var $ii = 0; $ii < $el_list.length; $ii++){
        if(
            ($el_list[$ii].nodeName != 'DIV') ||
            (
                ($el_list[$ii].nodeName == 'DIV') && 
                ($el_list[$ii].hasAttribute('class')) && 
                (
                    (/ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                    (/samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                    (SlctrClass($el_list[$ii]) == 'code_header')||
                    (SlctrClass($el_list[$ii]) == 'code_subheader')
                )
            )
        ){
            $break_els.push(GetSelector($el_list[$ii]));
        }
    }
}

for(var $i = 0; $i < $break_els.length; $i++){
      $break_els[$i].orig_el.addEventListener('click',addBreak,false);
} 

So, how do I pass on both the event AND the value of $break_els[$i] to the function of addBreak?

[aj_nsc]

for(var $i = 0; $i < $break_els.length; $i++){ 
      (function(num) { //need to create a closure otherwise we'll be referencing the same i every time when the event listener is executed
         $break_els[num].orig_el.addEventListener('click',function(e) { addBreak(e,$break_els[num]); } ,false); 
      }($i));
}

Just curious, is there a reason you use a $ in front of all your variables?

[Mr Initial Man]

Just curious, is there a reason you use a $ in front of all your variables?

PHP habit.

[Mr Initial Man]

My finished page-break-controlling script!

var $curr_el;
var $breaklist = new Array();
function Styling($el, $stl){
    for(var $p in $stl){
        $el.style[$p] = $stl[$p]
    }
}

/*  Page Menu */
var $pagemenu = document.createElement('j_div');
Styling($pagemenu,{
    position:'fixed',
    width:'500px',
    height:'500px',
    top:'0',
    right:'0',
    border:'3px double black',
    background:'white',
    display:'none'
});

var $pageoptions = document.createElement('j_div');
$pagemenu.appendChild($pageoptions);
Styling($pageoptions,{
    display:'block'
});

$pageoptions.opt1 = document.createElement('j_p');
$pageoptions.appendChild($pageoptions.opt1);
$pageoptions.opt1.appendChild(document.createTextNode('Add page break'));
$pageoptions.opt1.onclick = function(){
    var $found = false;
    var $i = 0;
    while($i < $breaklist.length && !$found){
        $found = ($breaklist[$i] == $curr_el.selector)
        $i++;
    }
    if(!$found){
        $breaklist.push($curr_el.selector);
        Styling($curr_el.brk_el, {
            borderTop:'1px dashed #888',
            pageBreakBefore:'always'
        });
    }
    HideBrkMenu();
}
Styling($pageoptions.opt1,{
    display:'block'
});

$pageoptions.opt2 = document.createElement('j_p');
$pageoptions.appendChild($pageoptions.opt2);
$pageoptions.opt2.appendChild(document.createTextNode('Remove page break'));
$pageoptions.opt2.onclick = function(){
    var $check;
    var $keep = new Array();
    while($breaklist.length > 0){
        $check = $breaklist.shift();
        if($check != $curr_el.selector){
            $keep.push($check);
        }
    }
    for(var $i = 0; $i < $keep.length; $i++){
        $breaklist.push($keep[$i]);
    }
    Styling($curr_el.brk_el, {
        pageBreakBefore:'auto'
    });
    HideBrkMenu();
}
Styling($pageoptions.opt2,{
    display:'block'
});

$pageoptions.opt3 = document.createElement('j_p');
$pageoptions.appendChild($pageoptions.opt3);
$pageoptions.opt3.appendChild(document.createTextNode('Show page break'));
$pageoptions.opt3.onclick = function(){
    $pageoptions.style.display = 'none'
    showBreaks();
}
Styling($pageoptions.opt3,{
    display:'block'
});

var $pagebreaks = document.createElement('j_div');

Styling($pagebreaks,{
    overflow:'auto',
    whiteSpace:'pre',
    display:'none',
    background:'white',
    color:'black',
    fontSize:'8pt'
});

$pagebreaks.brks = document.createTextNode(' ');
$pagebreaks.appendChild($pagebreaks.brks);


function showBreaks(){
    $pagebreaks.brks.data = '';
    for(var $i = 0; $i < $breaklist.length; $i++){
        $pagebreaks.brks.data += ($breaklist[$i] + ',\r\n');
    }
    $pagebreaks.style.display = 'block';
    $pageoptions.style.display = 'none';
}
$pagemenu.appendChild($pagebreaks);

$pagemenu.ondblclick = function(){HideBrkMenu();}


document.lastChild.lastChild.appendChild($pagemenu);

function HideBrkMenu(){
    $pagemenu.style.display='none';
    $pagebreaks.style.display = 'none';
    $pageoptions.style.display='block';
}

/*  Set Up Click Events  */

function SlctrClass($elem){
    var $cls = $elem.getAttribute('class');
    var $class;
    if($cls.indexOf(' ') > -1){
        $class = $cls.substr(0, $cls.indexOf(' '));
    } else {
        $class = $cls;
    }
    return $class;
}
function GetSelector($elem){
    var $el = $elem;
    while(
        ($el.getAttribute('class')) &&
        (
            ($el.getAttribute('class')==($el.nodeName.toLowerCase() + '1')) ||
            ($el.getAttribute('class')==($el.nodeName.toLowerCase() + '01')) ||
            ($el.getAttribute('class')==($el.nodeName.toLowerCase() + '001'))
        ) &&
        ($el.nodeName != 'UL') &&
        ($el.nodeName != 'OL') &&
        ($el.nodeName != 'DL') &&
        ($el.nodeName != 'P')
    ){$el = $el.parentNode;}
    if(
        ($el.nodeName == 'H2') ||
        ($el.nodeName == 'H3') ||
        ($el.nodeName == 'H4') ||
        ($el.nodeName == 'H5') ||
        ($el.nodeName == 'H6') ||
        ($el.nodeName == 'IMG') ||
        ($el.nodeName == 'THEAD')||
        ($el.nodeName == 'TBODY')||
        ($el.nodeName == 'CAPTION') ||
        (($el.nodeName == 'DIV') && ($el.getAttribute('class') == 'code_header'))||
        (($el.nodeName == 'DIV') && ($el.getAttribute('class').indexOf('sample') === 0))
    ){$el = $el.parentNode;}
    if(
        (($el.nodeName == 'DIV') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('sample') === 0) && ($el.getAttribute('class') == 'ln01'))||
        (($el.nodeName == 'DIV') && ($el.parentNode.hasAttribute('class')) && ($el.parentNode.getAttribute('class').indexOf('samp01') > -1) && ($el.getAttribute('class') == 'ln01'))
    ){$el = $el.parentNode.parentNode;}
    var $selector;
    var $ret_el = $el;
    
    if($el.getAttribute('id')){
        $selector = '#' + $el.getAttribute('id');
    }else if($el.parentNode.nodeName=='THEAD'){
        $selector = '#' + $el.parentNode.parentNode.getAttribute('id');
    }else{
        $selector = $el.nodeName.toLowerCase()+'.'+ SlctrClass($el);
        while(!$el.getAttribute('id')){
            $el = $el.parentNode;
            if($el.hasAttribute('class')  && !($el.hasAttribute('id'))){
                $selector = $el.nodeName.toLowerCase() + '.' + SlctrClass($el) + ' > ' + $selector;
            }else if($el.parentNode.nodeName == 'TABLE'){
                $selector  = $el.nodeName.toLowerCase() + ' > ' + $selector;
            }
        }
        $selector = '#' + $el.getAttribute('id') + ' > ' + $selector;
    }
    var $orig_el_name = $elem.nodeName.toLowerCase() + (($elem.hasAttribute('class'))?('.' + $elem.getAttribute('class').replace(/\s/g,'.')):'');
    var $ret_el_name = $ret_el.nodeName.toLowerCase() + 
        (($ret_el.hasAttribute('id'))?('#' + $ret_el.getAttribute('id')):'') +
        (($ret_el.hasAttribute('class'))?('.' + $ret_el.getAttribute('class').replace(/\s/g,'.')):'') +
    '';
    return {
        selector:$selector,
        brk_el:$ret_el,
        orig_el:$elem,
        brk_el_nm:$ret_el_name,
        orig_el_nm:$orig_el_name,
    };
}



function addBreak($ev, $el){if($ev.ctrlKey){
    $curr_el = $el;
    $pagemenu.style.display = 'block';
}}

var $el_names = new Array(
    'img',
    'div',
    'h2',
    'h3',
    'h4',
    'h5',
    'h6',
    'p',
    'li',
    'dt',
    'tr',
    'caption'
);
var $break_els = new Array();

for(var $i = 0; $i < $el_names.length; $i++){
    var $el_list = document.getElementsByTagName($el_names[$i]);
    for(var $ii = 0; $ii < $el_list.length; $ii++){
        if(
            ($el_list[$ii].nodeName != 'DIV') ||
            (
                ($el_list[$ii].nodeName == 'DIV') && 
                ($el_list[$ii].hasAttribute('class')) && 
                (
                    (/ln[0-9][0-9]/.test(SlctrClass($el_list[$ii])))||
                    (/samp[0-9]/.test(SlctrClass($el_list[$ii])))||
                    (SlctrClass($el_list[$ii]) == 'code_header')||
                    (SlctrClass($el_list[$ii]) == 'code_subheader')
                )
            )
        ){
            $break_els.push(GetSelector($el_list[$ii]));
        }
    }
}

for(var $i = 0; $i < $break_els.length; $i++){
    (function(num) {
        $break_els[num].orig_el.addEventListener('click',function(e) { addBreak(e,$break_els[num]); } ,false); 
    }($i));
} 

Now if only I could make head or tail of my own script...