Archief - JS: javascript inkorten, events vanuit extern scriptblad?

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
t

tdskate

Legacy Member
Kan ik vanuit dit extern script
Code: 
<script src="js/layerscript.js" type="text/javascript"></script>
de events onfocus, onblur, onmouseover en onmouseout genereren?
Zoja, hoe?



Ik wil gewoon mijn HTML wat simpeler doen lijken, zo:
Code: 
<li><a id="btn-dag1" href="#" onfocus="showLayer1();" onblur="hideLayer1();" onmouseover="showLayer1();" onmouseout="hideLayer1();">Maandag 31 Juli</a></li>
<li><a id="btn-dag2" href="#" onfocus="showLayer2();" onblur="hideLayer2();" onmouseover="showLayer2();" onmouseout="hideLayer2();">Dinsdag 1 Augustus</a></li>
<li><a id="btn-dag3" href="#" onfocus="showLayer3();" onblur="hideLayer3();" onmouseover="showLayer3();" onmouseout="hideLayer3();">Woensdag 2 Augustus</a></li>
<li><a id="btn-dag4" href="#" onfocus="showLayer4();" onblur="hideLayer4();" onmouseover="showLayer4();" onmouseout="hideLayer4();">Donderdag 3 Augustus</a></li>
<li><a id="btn-dag5" href="#" onfocus="showLayer5();" onblur="hideLayer5();" onmouseover="showLayer5();" onmouseout="hideLayer5();">Vrijdag 4 Augustus</a></li>
<li><a id="btn-dag6" href="#" onfocus="showLayer6();" onblur="hideLayer6();" onmouseover="showLayer6();" onmouseout="hideLayer6();">Zaterdag 5 Augustus</a></li>
<li><a id="btn-dag7" href="#" onfocus="showLayer7();" onblur="hideLayer7();" onmouseover="showLayer7();" onmouseout="hideLayer7();">Zondag 6 Augustus</a></li>
niet dus.


Grts,
Thx
C

Cakeman

Legacy Member
In je .js-bestand kan je dit zetten:
Code: 
document.getElementById('btn-dag1').onfocus = showLayer1;
document.getElementById('btn-dag1').onblur = hideLayer1;
document.getElementById('btn-dag1').onmouseover = showLayer1;
document.getElementById('btn-dag1').onmouseout = hideLayer1;
t

tdskate

Legacy Member
werkt enkel als ik body onload="functiesvanbtns" zet,
of kan ik dat ook extern definieren?
t

tdskate

Legacy Member
Code: 
function stuff() {
document.getElementById('btn-dag1').onfocus = showLayer1;
document.getElementById('btn-dag1').onblur = hideLayer1;
document.getElementById('btn-dag1').onmouseover = showLayer1;
document.getElementById('btn-dag1').onmouseout = hideLayer1;
}

window.onload = stuff;

werkt blijkbaar niet?
t

tdskate

Legacy Member
Code: 
function init(){
document.getElementById('btn-dag1').onfocus = showLayer1;
document.getElementById('btn-dag1').onblur = hideLayer1;
document.getElementById('btn-dag1').onmouseover = showLayer1;
document.getElementById('btn-dag1').onmouseout = hideLayer1;
}

window.onload=init;

en dees werkt wel...
t

tdskate

Legacy Member
Dit werkt
Code: 
function setBtnEvents(){
for (var i=1;i<=b;i++){
	document.getElementById("btn-dag"+i).onfocus = function(){ document.getElementById("layer-dag1").style.visibility = "visible"; };
	document.getElementById("btn-dag"+i).onblur = function(){ document.getElementById("layer-dag1").style.visibility = "hidden"; };
	document.getElementById("btn-dag"+i).onmouseover = function(){ document.getElementById("layer-dag1").style.visibility = "visible"; };
	document.getElementById("btn-dag"+i).onmouseout = function(){ document.getElementById("layer-dag1").style.visibility = "hidden"; };
	}
}


Dit werkt niet
Code: 
function setBtnEvents(){
for (var i=1;i<=b;i++){
	document.getElementById("btn-dag"+i).onfocus = function(){ document.getElementById("layer-dag"+i).style.visibility = "visible"; };
	document.getElementById("btn-dag"+i).onblur = function(){ document.getElementById("layer-dag"+i).style.visibility = "hidden"; };
	document.getElementById("btn-dag"+i).onmouseover = function(){ document.getElementById("layer-dag"+i).style.visibility = "visible"; };
	document.getElementById("btn-dag"+i).onmouseout = function(){ document.getElementById("layer-dag"+i).style.visibility = "hidden"; };
	}
}
note: ("layer-dag"+i)

de i zou voor elke knop een ander nummertje moeten genreren
in het eerste voorbeeld werkt het als ik layer-dag1 vast definieer, da zou dynamisch moeten. zodat elke knop zijn eigen layer zichtbaar maakt.
O

Obliv`

Legacy Member
probeer dit eens:

Code: 
function setBtnEvents()
{
   for (var i=1;i<=b;i++)
   {
      document.getElementById("btn-dag"+i).onfocus = function() {swap("layer-dag" + i);}
      document.getElementById("btn-dag"+i).onblur = function() {swap("layer-dag" + i);}
      document.getElementById("btn-dag"+i).onmouseover = function() {swap("layer-dag" + i);}
      document.getElementById("btn-dag"+i).onmouseout = function() {swap("layer-dag" + i);}
   }
}

function swap(layer)
{
   var layer = document.getElementByID(layer);

   if (layer.style.visibility == "visible")
   {
      layer.style.visibility = "hidden";
   }
   else
   {
      layer.style.visiblity = "visible";
   }
}

Kheb dit hier vlug getypt, dus er kunnen wel wat fouten in zitten.
t

tdskate

Legacy Member
werkt niet


Code: 
function setBtnEvents(){
	for (var i=1;i<=b;i++){
		document.getElementById("btn-dag"+i).onmouseover = function(){ alert(i); document.getElementById("layer-dag"+i).style.visibility = "visible"; };
		document.getElementById("btn-dag"+i).onmouseout = function(){ document.getElementById("layer-dag"+i).style.visibility = "hidden"; };
	}
}

Ik probeerde met die Alert te achterhalen of de i wel correct werd weergegeven, en wat blijkt, i = 8 op alle knoppen...
Er is iets fout met die inline functie..
t

tdskate

Legacy Member
Code: 
function setBtnEvents(){
	for (var i=1;i<=b;i++){
		function hideLayer(){
			document.getElementById("layer-dag"+i).style.visibility = "visible";
		}
		function showLayer(){
			document.getElementById("layer-dag"+i).style.visibility = "hidden";
		}
		document.getElementById("btn-dag"+i).onmouseover = hideLayer;
		document.getElementById("btn-dag"+i).onmouseout = showLayer;
	}
}

werkt ook niet
t

tdskate

Legacy Member
Code: 
function setBtnEvents(){
	document.getElementById("btn-dag1").onmouseover = function(){document.getElementById("layer-dag1").style.visibility = "visible";};
	document.getElementById("btn-dag1").onfocus = function(){document.getElementById("layer-dag1").style.visibility = "visible";};
	document.getElementById("btn-dag1").onmouseout = function(){document.getElementById("layer-dag1").style.visibility = "hidden";};
	document.getElementById("btn-dag1").onblur = function(){document.getElementById("layer-dag1").style.visibility = "hidden";};

	document.getElementById("btn-dag2").onmouseover = function(){document.getElementById("layer-dag2").style.visibility = "visible";};
	document.getElementById("btn-dag2").onfocus = function(){document.getElementById("layer-dag2").style.visibility = "visible";};
	document.getElementById("btn-dag2").onmouseout = function(){document.getElementById("layer-dag2").style.visibility = "hidden";};
	document.getElementById("btn-dag2").onblur = function(){document.getElementById("layer-dag2").style.visibility = "hidden";};

	document.getElementById("btn-dag3").onmouseover = function(){document.getElementById("layer-dag3").style.visibility = "visible";};
	document.getElementById("btn-dag3").onfocus = function(){document.getElementById("layer-dag3").style.visibility = "visible";};
	document.getElementById("btn-dag3").onmouseout = function(){document.getElementById("layer-dag3").style.visibility = "hidden";};
	document.getElementById("btn-dag3").onblur = function(){document.getElementById("layer-dag3").style.visibility = "hidden";};

	document.getElementById("btn-dag4").onmouseover = function(){document.getElementById("layer-dag4").style.visibility = "visible";};
	document.getElementById("btn-dag4").onfocus = function(){document.getElementById("layer-dag4").style.visibility = "visible";};
	document.getElementById("btn-dag4").onmouseout = function(){document.getElementById("layer-dag4").style.visibility = "hidden";};
	document.getElementById("btn-dag4").onblur = function(){document.getElementById("layer-dag4").style.visibility = "hidden";};

	document.getElementById("btn-dag5").onmouseover = function(){document.getElementById("layer-dag5").style.visibility = "visible";};
	document.getElementById("btn-dag5").onfocus = function(){document.getElementById("layer-dag5").style.visibility = "visible";};
	document.getElementById("btn-dag5").onmouseout = function(){document.getElementById("layer-dag5").style.visibility = "hidden";};
	document.getElementById("btn-dag5").onblur = function(){document.getElementById("layer-dag5").style.visibility = "hidden";};

	document.getElementById("btn-dag6").onmouseover = function(){document.getElementById("layer-dag6").style.visibility = "visible";};
	document.getElementById("btn-dag6").onfocus = function(){document.getElementById("layer-dag6").style.visibility = "visible";};
	document.getElementById("btn-dag6").onmouseout = function(){document.getElementById("layer-dag6").style.visibility = "hidden";};
	document.getElementById("btn-dag6").onblur = function(){document.getElementById("layer-dag6").style.visibility = "hidden";};

	document.getElementById("btn-dag7").onmouseover = function(){document.getElementById("layer-dag7").style.visibility = "visible";};
	document.getElementById("btn-dag7").onfocus = function(){document.getElementById("layer-dag7").style.visibility = "visible";};
	document.getElementById("btn-dag7").onmouseout = function(){document.getElementById("layer-dag7").style.visibility = "hidden";};
	document.getElementById("btn-dag7").onblur = function(){document.getElementById("layer-dag7").style.visibility = "hidden";};
}

dit werkt :)
t

tdskate

Legacy Member
Code: 
function assign(h){
	document.getElementById("btn-dag"+h).onmouseover = function(){document.getElementById("layer-dag"+h).style.visibility = "visible";};
	document.getElementById("btn-dag"+h).onmouseout = function(){document.getElementById("layer-dag"+h).style.visibility = "hidden";};
	document.getElementById("btn-dag"+h).onfocus = document.getElementById("btn-dag"+h).onmouseover;
	document.getElementById("btn-dag"+h).onblur = document.getElementById("btn-dag"+h).onmouseout;
}

function setBtnEvents(){
	for (h=1;h<=b;h++){
		assign(h);
	}
}
eindelijk !
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan