How can I move my Onclick and Onmouseover from my HTML to my javascript?

Question

My teacher told me that I cannot put Onclick and OnMouseover etc in my html? I need to put it into my .JS fille? After some search on google everyone is doing the same thing like I'm? I can only use Javascript

Can anyone help me out?

<script type="text/javascript">
        var pauseSlider=false;
        var image = []
        image[0]=new Image()
        image[0].src = "./images/1.jpg"
        image[1]=new Image()
        image[1].src = "./images/2.jpg"
        image[2]=new Image()
        image[2].src = "./images/3.jpg"
        image[3]=new Image()
        image[3].src = "./images/4.jpg"
</script>

This is my preloading (html, can stay there)

<img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true"    onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>

So this is my 'mistake' I have to put 'onclick' and onmouseover etc in my .JS fille, I don't know how and where!

 var step = 1
document.getElementsByName'slide'
function slideit(){

    if(!pauseSlider)
    {
        slideNext()
    }
    setTimeout("slideit()",2500)
}
function slideNext()
{
    var slideimage = document.getElementsByName("slide")[0];
    slideimage.src=image[step].src

    if (step<image.length-1)
        step++
    else
        step=0
}

This is my Javascript file (it's a imageslider)

I hope i've followed the rules, not sure about the 'code block'

I thank you!

Answer 1

Something like this:

var slideimage = document.getElementsByName("slide")[0];
slideimage.onclick = function() { ...... };

Answer 2

there many ways to bind events, described here

http://triaslama.wordpress.com/2008/07/22/four-ways-javascript-binding-event-listeners/

Answer 3

Add an id to your slide container...

<div id="slider">
    <img src="./images/1.jpg" name="slide" onmouseover="pauseSlider=true"    onmouseout="pauseSlider=false" onclick="slideNext()" width=960 height=500>
</div>

Then add your javascript like this...

window.onload = function(){
    var slider = document.getElementById('slider');
    slider.onclick = slidenext;
    slider.onmouseover = function(){pauseslider = true;};
    slider.onmouseout = function(){pauseslider = true;};
};

Answer 4

i suppose you might wanna try element.addEventListener(event, cbfunction, boolean);

https://developer.mozilla.org/it/docs/DOM/element.addEventListener