Registering several event handler functions - DOM

[avbryt]

Hi,

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

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?

        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!!

[hyperionXS]

<a href="#" id="hideShowStop">Click</a>
<script type="text/javascript">
document.getElementById('hideShowStop').onclick = function() { 
   hideAll(); show('Lay1'); stopTime() 
   return false;
})
</script>

[avbryt]

<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?

[hyperionXS]

Sure

document.getElementById('hideShowStop').addEventListener('click', function(){
	hideAll(); show('Lay1'); stopTime() 
	return false;
},false)

[avbryt]

Sure

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?

[hyperionXS]

Put this wxherever you need it

<a href="#" id="hideShowStop">Click</a>

And put this right before ending body ( </body> )

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

[avbryt]

Put this wxherever you need it

<a href="#" id="hideShowStop">Click</a>

And put this right before ending body ( </body> )

<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.

[hyperionXS]

However you want.
Anyway, I see you have an error in your functions

document.getElementById(layerName).style.display ='block';

shoud be

document.getElementById('layerName').style.display ='block';

[avbryt]

Thanks again for all the help, very kind.

Im still working on a solution though...

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?