www.webdeveloper.com
Results 1 to 9 of 9

Thread: Registering several event handler functions - DOM

  1. #1
    Join Date
    Dec 2011
    Posts
    22

    Lightbulb Registering several event handler functions - DOM

    Hi,

    how am I supposed to do this in the JSfile with the addeventlistener method.

    Code:
    In html <a href="#" onclick="hideAll(); show('Lay1'); stopTime()">
    
    like this:
    
    element.addeventlistener("click", hideAll(); show('Lay1'); stopTime(), false);
    
    or
     
    element.addeventlistener("click", functions() { hideAll(); show('Lay1'); stopTime() }, false)
    Where am I supposed to put the addeventlistener?

    Code:
            var timerID = null;
    	var timerOn = false;
    	var timecount = 1; 
    
    
    function show(layerName) {
    	document.getElementById(layerName).style.display ='block';
    }
    
    			
    function hide(layerName) {
    	document.getElementById(layerName).style.display ='none';
    }
    
    
    function hideAll() {
            hide('LAYER1');
    	hide('LAYER2');
    	hide('LAYER3');
    	hide('LAYER4');
    }
    
    
    function startTime() {
    	if (timerOn == false) {
    	timerID=setTimeout( "hideAll()" , timecount);
    	timerOn = true;
        }
    }
    
    			
    
    function stopTime() {
    	if (timerOn) {
    	clearTimeout(timerID);
    	timerID = null;
    	timerOn = false;
        }
    }
    If somebody have any ideas it would be really great!!

  2. #2
    Join Date
    Feb 2012
    Posts
    218
    HTML Code:
    <a href="#" id="hideShowStop">Click</a>
    <script type="text/javascript">
    document.getElementById('hideShowStop').onclick = function() { 
       hideAll(); show('Lay1'); stopTime() 
       return false;
    })
    </script>

  3. #3
    Join Date
    Dec 2011
    Posts
    22
    Quote Originally Posted by hyperionXS View Post
    HTML Code:
    <a href="#" id="hideShowStop">Click</a>
    <script type="text/javascript">
    document.getElementById('hideShowStop').onclick = function() { 
       hideAll(); show('Lay1'); stopTime() 
       return false;
    })
    </script>
    Thank you,
    do you know how it would look like using addeventlisteners as that is what I want to use?

  4. #4
    Join Date
    Feb 2012
    Posts
    218
    Sure
    Code:
    document.getElementById('hideShowStop').addEventListener('click', function(){
    	hideAll(); show('Lay1'); stopTime() 
    	return false;
    },false)

  5. #5
    Join Date
    Dec 2011
    Posts
    22
    Quote Originally Posted by hyperionXS View Post
    Sure
    Code:
    document.getElementById('hideShowStop').addEventListener('click', function(){
    	hideAll(); show('Lay1'); stopTime() 
    	return false;
    },false)
    This is great!!
    However, I am not great regarding JS...

    Tried but failed.
    When I use it in HTML it works but when trying unobtrusive JS I dont know how to think about it. I tried to put this at the end of the script in a initializing function.

    function hideAll() is onload and function show('Lay1') and function stopTime() is not onload. So does that make a difference regarding where to put them in the script?

  6. #6
    Join Date
    Feb 2012
    Posts
    218
    Put this wxherever you need it
    HTML Code:
    <a href="#" id="hideShowStop">Click</a>
    And put this right before ending body ( </body> )
    Code:
    <script type="text/javascript">
    document.getElementById('hideShowStop').addEventListener('click', function(){
    	hideAll(); show('Lay1'); stopTime() 
    	return false;
    },false)
    
    	var timerID = null;
    	var timerOn = false;
    	var timecount = 1; 
    
    
    function show(layerName) {
    	document.getElementById(layerName).style.display ='block';
    }
    
    			
    function hide(layerName) {
    	document.getElementById(layerName).style.display ='none';
    }
    
    
    function hideAll() {
        hide('LAYER1');
    	hide('LAYER2');
    	hide('LAYER3');
    	hide('LAYER4');
    }
    
    
    function startTime() {
    	if (timerOn == false) {
    	timerID=setTimeout( "hideAll()" , timecount);
    	timerOn = true;
        }
    }
    
    			
    
    function stopTime() {
    	if (timerOn) {
    	clearTimeout(timerID);
    	timerID = null;
    	timerOn = false;
        }
    }
    </script>

  7. #7
    Join Date
    Dec 2011
    Posts
    22
    Quote Originally Posted by hyperionXS View Post
    Put this wxherever you need it
    HTML Code:
    <a href="#" id="hideShowStop">Click</a>
    And put this right before ending body ( </body> )
    Code:
    <script type="text/javascript">
    document.getElementById('hideShowStop').addEventListener('click', function(){
    	hideAll(); show('Lay1'); stopTime() 
    	return false;
    },false)
    
    	var timerID = null;
    	var timerOn = false;
    	var timecount = 1; 
    
    
    function show(layerName) {
    	document.getElementById(layerName).style.display ='block';
    }
    
    			
    function hide(layerName) {
    	document.getElementById(layerName).style.display ='none';
    }
    
    
    function hideAll() {
        hide('LAYER1');
    	hide('LAYER2');
    	hide('LAYER3');
    	hide('LAYER4');
    }
    
    
    function startTime() {
    	if (timerOn == false) {
    	timerID=setTimeout( "hideAll()" , timecount);
    	timerOn = true;
        }
    }
    
    			
    
    function stopTime() {
    	if (timerOn) {
    	clearTimeout(timerID);
    	timerID = null;
    	timerOn = false;
        }
    }
    </script>
    Put it in the body of HTML document?
    I want it in the external JS file...
    Sorry if I dont understand correct.

  8. #8
    Join Date
    Feb 2012
    Posts
    218
    However you want.
    Anyway, I see you have an error in your functions
    Code:
    document.getElementById(layerName).style.display ='block';
    shoud be
    Code:
    document.getElementById('layerName').style.display ='block';

  9. #9
    Join Date
    Dec 2011
    Posts
    22
    Thanks again for all the help, very kind.

    Im still working on a solution though...

    Code:
    html 
    
    
    <a href="#" onclick="hideAll(); show('Layer1'); stopTime()">
    <a href="#" onclick="hideAll(); show('Layer2'); stopTime()">
    <a href="#" onclick="hideAll(); show('Layer3'); stopTime()">
    <a href="#" onclick="hideAll(); show('Layer4'); stopTime()">
    
    
    
    
    
    
    JS
    
    
    
     var timerID = null;
        var timerOn = false;
        var timecount = 1; 
    
    
    function show(layerName) {
        document.getElementById(layerName).style.display ='block';
    }
    
                
    function hide(layerName) {
        document.getElementById(layerName).style.display ='none';
    }
    
    
    function hideAll() {
            hide('LAYER1');
        hide('LAYER2');
        hide('LAYER3');
        hide('LAYER4');
    }
    
    
    function startTime() {
        if (timerOn == false) {
        timerID=setTimeout( "hideAll()" , timecount);
        timerOn = true;
        }
    }
    
                
    
    function stopTime() {
        if (timerOn) {
        clearTimeout(timerID);
        timerID = null;
        timerOn = false;
        }
    }
    I want to call the functions from the JSfile with addeeventlisteners. Doing that I also need to get an id for every link, that also will change the code in the JSfile.

    How get the functions call to the JSfile and how make the link idīs to work in the JS file?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles