I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:

<button type="button" onclick="toggleStyle()">Toggle Style</button>

This is the javascript coding. Note that when I click the button, not even the alert() method is executed:

        function toggleStyle() {
        alert("toggleStyle() is working.");
        var divMessage = document.getElementById("divMessage");

        if (divMessage.className === "message-style1") {
            divMessage.className = "";
        }
        else {
            divMessage.className = "message-style1";
        }

I wrote some html/css/javascript code that was taken verbatim from a javascript textbook. For some reason, the code does not run correctly in my browser (which is the newest version of Firefox). When I click the button, the javascript function "toggleStyle()" does not execute in the browser at ALL. This is the code for the button:

<button type="button" onclick="toggleStyle()">Toggle Style</button>

This is the javascript coding. Note that when I click the button, not even the alert() method is executed:

        function toggleStyle() {
        alert("toggleStyle() is working.");
        var divMessage = document.getElementById("divMessage");

        if (divMessage.className === "message-style1") {
            divMessage.className = "";
        }
        else {
            divMessage.className = "message-style1";
        }

• javascript
• html
• css
• button
• onclick

• Have you tried checking Firefox's error console? Press Ctrl+Shift+J (if on Windows) to bring up any possible errors or warnings that may be causing the code to execute improperly. See: developer.mozilla/en/Error_Console if it isn't enabled for you by default. – Dan Herbert Commented May 30, 2011 at 19:20
• 2 Is there another } to end the function? – Ash Burlaczenko Commented May 30, 2011 at 19:22
• You forgot the closing '}' for your function. – cellcortex Commented May 30, 2011 at 19:22
• Where have you defined the function (location) ? Can you post the full HTML code including JavaScript ? – Yohan Liyanage Commented May 30, 2011 at 19:24

2 Answers 2

Did you put the code inside <script type="text/javascript">?

<script type="text/javascript">

function toggleStyle() {
        alert("toggleStyle() is working.");
        var divMessage = document.getElementById("divMessage");

        if (divMessage.className === "message-style1") {
            divMessage.className = "";
        }
        else {
            divMessage.className = "message-style1";
        }
}
</script>

The above code is working:

For starters, I don't see the end } brace; do you have one?

Also, where is the function defined? Does the script get loaded? Are there any errors?