JavaScript not working in browser

Question

I have a problem when I create page with the script showing document.write("Text"); text shows up in the browser.

But I am trying to create a page that will show different colours in a sequence within a set of tiles and when I try the following code this does not work.

Please could someone help me to solve this issue the code is pasted below.

html:

<html>
<head>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen>
<SCRIPT LANGUAGE="JavaScript" SRC="script1.js">
</SCRIPT>
</head>
<body>

<div class="container">
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square1id" class="box"></div>

    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div id="square2id" class="box spacing"></div>
    <div class="box"></div>

    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div class="box"></div>

    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div class="box spacing"></div>
    <div class="box"></div>
</div>

</body>
</html>

css:

body{
    background-color:#000000;
    margin:0;
    padding:0;
}

h1{
  color:#ffffff;
  text-align:center;
}

.container{
    overflow:hidden;
    width:860px;
    margin-left:250px;
    margin-top:20px;
}
.box{
    width:210px;
    height:120px;
    float:left;
    background-color:#4D4D4D;
    margin-bottom:3px;
}

.spacing{
    margin-right:3px;
}

javaScript:

$(document).ready(function(){

var colourinfo = {
    square1id: [
                '#000000'

                ],

    square2id: [
                '#ffffff'

                ]

};

var count = 0;

var changecol = function(){
    $.each(colourinfo, function(tileid, colarray){
    $('#'+tileid).css('background-color', colarray[count%colarray.length]);
}); 
    count++;
    };
    setInterval(changecol, 1000);
    });

I would appreciate any help on this. Thank you.

is this what you want it to do? jsfiddle.net/BumbleB2na/4xjh8 — BumbleB2na
– BumbleB2na, Commented Jun 8, 2011 at 22:33

Scherbius.com · Accepted Answer · 2011-06-08 22:33:51Z

2

jQuery code requires jQuery library linked to your webpage.

insert the following in the html part, between <head> and </head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

answered Jun 8, 2011 at 22:33

Scherbius.com

3,4224 gold badges26 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

David Over a year ago

Thanks this works well, do you know how I can change this so each tile colour appears one after the other?

Collectives™ on Stack Overflow

JavaScript not working in browser

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related