Beginner Javascript (korter maken van code?)

[migz]

Hallo! Net nieuw in javascript. heb dit geschreven. nu er moet toch een easier manier zijn zonder voor elke div een andere functie te maken ? Dankje!

			<div id="linkblock" style="margin-top:40px;">
				<a onmouseover="hover();" onmouseout="hoverout();" 
				href="autroprime.html">Brand</a><br />
				<div class="hover" id="brand"></div>
			</div>
			
			<div id="linkblock" style="margin-top:50px;">
				<a onmouseover="hover2();" onmouseout="hoverout2();" 
				href="#">Koeling</a><br />
				<div class="hover" id="koeling"></div>
			</div>
			
			<div id="linkblock" style="margin-top:55px;">
				<a onmouseover="hover3();" onmouseout="hoverout3();" 
				href="http://www.atsgroep.be">ATS</a><br />
				<div class="hover" id="ats"></div>
			</div>
		</div>
	</div>
	
	<div id="footer"></div>

<script>
function hover(){
document.getElementById('brand').innerHTML = 'visit website';
}

function hoverout(a){
document.getElementById('brand').innerHTML = '';
}

function hover2(){
document.getElementById('koeling').innerHTML = 'visit website';
}

function hoverout2(){
document.getElementById('koeling').innerHTML = '';
}

function hover3(){
document.getElementById('ats').innerHTML = 'visit website';
}

function hoverout3(){
document.getElementById('ats').innerHTML = '';
}
</script>

 

[Supersnail]

Je kan het id meegeven als parameter:

<a onmouseover="hover('brand');" onmouseout="hoverout('brand');" 
href="autroprime.html">Brand</a><br />

Dan kan je volstaan met deze functies
[js]function hover(id){
document.getElementById(id).innerHTML = 'visit website';
}

function hoverout(id){
document.getElementById(id).innerHTML = '';
}[/js]

 

[migz]

Super! dacht ik ook al aan. maar was die ' ' vergeten.. javascript is wel heel ingewikkeld / strict op de plaatsing van de ' ' en de " " .. moet'k nog 'ns goed bekijken
bedankt!

 

[Supersnail]

Dat zijn de meeste programmeertalen . Als een tekst letterlijk genomen moet worden (en dus geen variabele, functie, getal, o.i.d. is) moeten er aanhalingstekens omheen.

 

[migz]

maar ID's vanuit de html ( div's ) enzo moeten wel met ' ' dan hé ? sorry voor de offtopic

 

[That Guy]

Eh, ja.

Je moet, om het door te krijgen, even iets 'dieper' kijken. De getElementById functie ziet er zo uit:

[JS]Element.getElementById(String);[/JS]

waar Element een (al eerder opgehaald) HTML element is (zoals document) en String een letterreeks met een in de HTML overeenkomend ID.

En toevallig maak je in Javascript een String door er quotes omheen te zetten!

[JS]document.getElementById('mijnDiv');

// is hetzelfde als:

var eenVariabele = 'mijnDiv'; // variabele met een String als waarde
document.getElementById(div); // geen quotes hier![/JS]

In het voorbeeld van Supersnail:

[js]function hover(id)
{
document.getElementById(id).innerHTML = 'visit website';
}

// en dan aanroepen:

hover('iets');
hover('iets-anders');

// het kan zelfs zo:

var iets = 'blabla';
hover(iets); // maar dat is natuurlijk erg omslachtig.[/js]

wordt het ID als parameter (variabele in de functie-aanroep) doorgegeven. Zo krijg je dus een generieke functie, omdat je bij het aanroepen pas een ID bepaald!

 

[migz]

Super! heel hard bedankt voor de hulp!