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 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    unable to pass parameters to event handler

    I have reduced my problem to a few lines of HTML

    [CODE]
    <html><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8;" />

    <script type="text/javascript">
    function Screen(active){ // Screen psuedo-class

    this.msIn=function(e){e.style.backgroundColor='#BACDCD'; e.focus()};

    this.msIn2=function(e){ // msIn with diagnostics
    alert(e.nodeName);
    if(e.id=='newNode')alert('Newnode');
    e.style.backgroundColor='#BACDCD'; e.focus()};

    this.newSection=function(e){
    var node=document.createElement('p');
    node.innerHTML="New Section";
    node.id='newNode'; node.style.background='red';
    node.addEventListener("mouseover",s.msIn2,false);
    var el=document.getElementById('pdata');
    var parent=el.parentNode;
    parent.insertBefore(node,el);
    }

    }
    </script>

    </head><body onload=" s= new Screen(1,20);" >
    <p id="pdata" onmouseover="s.msIn(this);" onclick="s.newSection(this);">
    Click to create new section</p>
    </body></head></html>
    [CODE]

    Click on the displayed text, and after a delay (Firefox) or immediately (Chrome) the new elermemt appears in red as expected. Clicking the red element not surprisingly gives an undefined message.

    Basically the addEventListener code does not like an "msIn(this)" parameter, but the routine needs the active element to function. I assume I am missing a simple point, but have not been able to find a solution on Google, and assume it is better than all the rest for resolving programming problems.

    Any ideas welcome.

    Thanks Bill

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Well, just for starters, the HTML is illegal.

    You have </body></head>.

    The </head> must be *before* the <body> tag.

    Let's see if that helps...
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    Okay, you did have </head> before the <body>. The extra </head> is illegal, but not hurting anything.

    The real problem is that you misunderstand the difference between e (the event argument) and this.

    I can easily fix your code:
    Code:
        this.msIn2=function(e){ // msIn with diagnostics
            var element = e.srcElement;
            alert(element.nodeName);
            if(element.id=='newNode')alert('Newnode');
            element.style.backgroundColor='#BACDCD'; e.focus()
        };
    But now you do, indeed, need two different functions: One which is called from here
    Code:
    <p id="pdata" onmouseover="s.msIn(this);" onclick="s.newSection(this);">
    and the other which is called from your added event listener.

    Probably a better way to fix this:
    Code:
    <html><head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8;" />
    
    <script type="text/javascript">
    function Screen(active){ // Screen psuedo-class
    
        this.msIn = function(obj){ obj.style.backgroundColor='#BACDCD'; obj.focus()};
    
        this.newSection=function(){
            var node=document.createElement('p');
            node.innerHTML="New Section";
            node.id='newNode'; node.style.background='red';
            node.addEventListener("mouseover",function() { s.msIn(this); },false);
            var el=document.getElementById('pdata');
            var parent=el.parentNode;
            parent.insertBefore(node,el);
        }
    
    }
    </script>
    
    </head><body onload=" s= new Screen(1,20);" >
    <p id="pdata" onmouseover="s.msIn(this);" onclick="s.newSection();">
        Click to create new section
    </p>
    </body></html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    But the really better way to do this is to move your JavaScript to the end of the page, where it belongs, and get rid of the <body onload> and the inline event handler calls in the HTML. Do it all in JS.
    Code:
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8;" />
    </head>
    <body>
    <p id="pdata">Click to create new section</p>
    
    <script type="text/javascript">
    function Screen(active) { // Screen psuedo-class
    
        this.msIn = function(e) {
            var obj = e.srcElement;
            obj.style.backgroundColor='#BACDCD'; 
            obj.focus();
        };
    
        this.newSection=function(){
            var node=document.createElement('p');
            node.innerHTML="New Section";
            node.id='newNode'; node.style.background='red';
            node.addEventListener("mouseover",s.msIn,false);
            var el=document.getElementById('pdata');
            var parent=el.parentNode;
            // parent.insertBefore(node,el);
            parent.appendChild(node);
        }
    
    }
    var s = new Screen( 1 );
    var pd = document.getElementById("pdata");
    pd.onmouseover = s.msIn;
    pd.onclick = s.newSection;
    </script>
    
    </body>
    </html>
    I changed your insertBefore to appendChild because with insertBefore the mouse ends up sitting on top of the newly created <p> and so immediately changes its background color. By using appendChild, the new <p> is below the mouse and you can see it start as red and then change when you move the mouse over it.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Tags for this Thread

    Posting Permissions

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