0

I copied the code like we're supposed to for this class. The book the college is using is HTML and JavaScript Basics 4th edition. I'm actually on the last project in the last chapter and can't figure out what is wrong with the code. It's supposed to change through different size and color fonts.

I've run the code through JShint.com and not getting anything definitive on the reason it's not working. Looked all over this site for even something kind of close to see if anything might help, nothing. I'm sure whatever it is, is very simple or as most likely happened something is missing in the book.

My java/html code:

<link href="js25.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript">
    /* <![CDATA[ */
    var index = 0;

    function stylize() {
        index++;
        if (index > 7) index = 1;
        var s = "myStyle" + index;
        var e = document.getElementById("MessageText");
        e.className = s;
        setTimeout("stylize()", 1500);
        return;
    }

    /* ]]> */
</script>
</head>
<body onload="stylize()">
    <table align="center" border="1" style="border-color:black">
        <tr>
            <td align="center">
                <font size="3"><b>STYLE CLASS VIEWER</b></font>
            </td>
        </tr>
        <tr>
            <td align="center" height="100" width="400">
                <div id="MessageText" class="myStyle1">
                    Hello World Wide Web!!
                </div>
            </td>
        </tr>
    </table>
</body>

and this is my css code:

.myStyle1 {
    color: black;
    font-size: 12;
}

.myStyle2 {
    color: black;
    font-size: 18;
}

.myStyle3 {
    color: black;
    font-size: 24;
}

.myStyle4 {
    color: black;
    font-size: 30;
}

.myStyle5 {
    color: black;
    font-size: 30;
}

.myStyle6 {
    color: black;
    font-size: 30;
}

.myStyle7 {
    color: black;
    font-size: 30;
}
Greg
  • 2,163
  • 1
  • 21
  • 23
Quixdi
  • 3
  • 3
  • It works for me: http://jsfiddle.net/qW3u7/ (granted, the differing classes do nothing because they're all the same due to font-size getting thrown out.) – Kevin B Apr 16 '14 at 18:19
  • "My java/html code" Might be just a typo but an important point to note: javascript != java. Not even close. – Adam Apr 16 '14 at 18:25

1 Answers1

2

Your JavaScript looks good, it seems like your problem is with the CSS. You will need to add 'px' to your font size. 

.myStyle1 {color:black; font-size:12px}
.myStyle2 {color:black; font-size:18px}
.myStyle3 {color:black; font-size:24px}
Joel Jeske
  • 1,618
  • 14
  • 17
  • Always a good idea to end all css declarations with a semi-colon too - even the last one in the brace. – Adam Apr 16 '14 at 18:22
  • Thanks!! that made a big difference. I knew it had to be something small but was totally missing it. Was concentrating WAY to much on the java script side. Adam, I was afraid that was part of my problem, so I left it as the book said to do the code. *facepalm* Will keep that in mind for the future. – Quixdi Apr 16 '14 at 18:39
  • Good, I'm glad I could help! – Joel Jeske Apr 16 '14 at 19:29