Question

It’s been a while since I worked with JavaScript – after my cert I began learning Perl and have worked with it ever since. I am just trying to get my hand back in and for a start with JS, I have written this what I would have said, was a simple, little script to change a border of a div quite simply. I cannot work out however, just where I’m going wrong. Appreciated of any advice/suggestion or ideas. TY in advance. Here’s my script..

<script type="text/javascript">

var i =0;
var e = document.getElementById("text");

e.style.border = "solid black 5px";
e.style.padding = "5px";

var colors = ["red", "yellow", "blue", "green"];

function changeBorder()
{
    e.border = colors[i];
    i++;
    var timer = setTimeout("changeBorder()", 1000);
}

window.onload=function()
{
    changeBorder();
}

</script>



<div id="text">
   <h1>Hello world</h1>I am Mike!.
</div>

Answer 1

try this: http://jsfiddle.net/maniator/CEsJR/

<script type="text/javascript">
    var i =0;
var colors = ["red", "yellow", "blue", "green"];

function changeBorder(e)
{
    //restarts color counter
    i = i % colors.length;

    e.style.border = colors[i] + " solid 5px"
    i++;

    var timer = setTimeout(function(){changeBorder(e)}, 1000);
}

window.onload=function()
{


    var e = document.getElementById("text");

    e.style.border = "solid black 5px";
    e.style.padding = "5px";

    changeBorder(e);
}

</script>



<div id="text">
   <h1>Hello world</h1>I am Mike!.
</div>

the e variable can only be created on page load