I'm new to JavaScript, and I need to get this done for a school project, so can someone explain me what am I doing wrong here? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript" src="test.js"></script> <style> @import "stil.css"; </style> </head> <body > <a href="http://www.w3schools.com" onmouseover="slika()"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQI6lrcdFX8FRV9NqojvemGnRb-KD-_UuHd-nlqFW4kKzufIHRL" id="slika"></a> </body> </html> Code (markup): function slika(){ document.getElementById("slika").src="http://collections.vam.ac.uk/images/template/ajax-loader.gif"; } function funk(){ alert("BRE?!"); } Code (markup): For some strange reason this doesn't work, but if I don't use the function, like this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript" src="test.js"></script> <style> @import "stil.css"; </style> </head> <body > <a href="http://www.w3schools.com" onmouseover="document.getElementById('slika').src='http://collections.vam.ac.uk/images/template/ajax-loader.gif';"><img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQI6lrcdFX8FRV9NqojvemGnRb-KD-_UuHd-nlqFW4kKzufIHRL" id="slika"></a> </body> </html> Code (markup): everything works like a charm. So can someone explain me what am I doing wrong here? Function funk() works without any problems when it's called, so I'm guessing that something is missing in my other function.
The function name had the same name as the id of the element , try unique names. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function slik(){ document.getElementById("slika").src="http://collections.vam.ac.uk/images/template/ajax-loader.gif"; } </script> </head> <body > <a href="http://www.w3schools.com" onmouseover="slik()"> <img src="http://t3.gstatic.com/images?q=tbn:ANd9GcQI6lrcdFX8FRV9NqojvemGnRb-KD-_UuHd-nlqFW4kKzufIHRL" id="slika" /> </a> </body> </html> HTML: