Learning JavaScript in college, this is supposed to be a frame based style viewer

StackOverflow https://stackoverflow.com/questions/23117010

  •  04-07-2023
  •  | 
  •  

Question

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;
}
Was it helpful?

Solution

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}
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top