CODEWITHSUNDEEP
javascripterror-handling
Heather Mosler
Heather Mosler

Reputation: 35

Not a function error in JavaScript

I am pretty new at JavaScript and I am getting an error that I don't know how to fix. I'm getting U.$('theForm').onsubmit = setHandlers; is not a function. I know its probably something stupid. If anyone can help, that would be awesome! Here is my code.

function reportEvent(e) {
    'use strict';
    if (typeof e == 'undefined') e = window.event;
    var target = e.target || e.srcElement;
    var msg = target.nodeName + ': ' + e.type + '\n';
    U.$('output').value += msg;
} // End of reportEvent() function.

function setHandlers(e) {
    'use strict';
    var event = ['mouseover', 'mouseout', 'click', 'keypress', 'blur'];
    for (var i = 0, count = events.length; i < count; i++) {
        var checkbox = U.$(events[i]);
        if (checkbox.checked) {
            U.addEvent(document, events[i], reportEvent);
        }   else {
            U.removeEvent(document, evets[i], reportEvent);
        }
    } // End of FOR loop.    
    U.$('output').value = '';
    return false;
} //End of setHandlers9 function.

window.onload = function() {
    'use strict';
    U.$('theForm').onsubmit = setHandlers;
};

here my html Here is my html.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Reporting Events</title>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="css/form.css">
</head>
<body>
    <!-- Script 8.7 - events.html -->
    <form action="#" method="post" id="theForm">
        <fieldset><legend>Reporting Events</legend>
            <p>Select the events you want to listen for:</p>
            <div><label for="mouseover">mouseover</label><input type="checkbox" name="mouseover" id="mouseover" value="mouseover"></div>
            <div><label for="mouseout">mouseout</label><input type="checkbox" name="mouseout" id="mouseout" value="mouseout"></div>
            <div><label for="click">click</label><input type="checkbox" name="click" id="click" value="click"></div>
            <div><label for="keypress">keypress</label><input type="checkbox" name="keypress" id="keypress" value="keypress"></div>
            <div><label for="blur">blur</label><input type="checkbox" name="blur" id="blur" value="blur"></div>
            <div><input type="submit" value="Submit" id="submit"></div>
            <div><label for="output">Output</label><textarea name="output" id="output" disabled></textarea></div>
        </fieldset>
    </form>
    <script src="js/utilities.js"></script>
    <script src="js/events.js"></script>
</body>
</html>

This is the utilities.js

var U = {
$: function(id) {
    'use strict';
    if (typeof id == 'string') {
        return document.getElementById(id);
    }
}, // End of $() function.
setText: function(id, message) {
    'use strict';
    if ( (typeof id == 'string') 
    && (typeof message == 'string') ) {
        var output = this.$(id);
        if (!output) return false;
        if (output.textContent !== undefined) {
            output.textContent = message;
        } else {
            output.innerText = message;
        }
        return true;
    } // End of main IF.
}, // End of setText() function.
addEvent: function(obj, type, fn) {
    'use strict';
    if (obj && obj.addEventListener) {
        obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) {
    obj.attachEvent('on' + type, fn);
    }
}, // End of addEvent() function. 
removeEvent: function(obj, type, fn) {
    'use strict';
    if (obj && obj.removeEventListener) {
        obj.removeEventListener(type, fn, false);
    } else if (obj && obj.detachEvent) {
        obj.detachEvent('on' + type, fn);
    }
} // End of removeEvent() function. 
}; // End of  U declaration.
var U = { /* functions */ };

Upvotes: 0

Views: 3009

Answers (2)

peernohell
peernohell

Reputation: 817

just remove the last line of utilities.js 

var U = { /* functions */ };

it's erase the first declaration so all function disappear.

Upvotes: 2

Bucket
Bucket

Reputation: 7521

I'm not entirely sure what U is, but if it seems to be working for you, the problem is that you need to use an ID selector:

U.$('#theForm').onsubmit = setHandlers

Additionally, make sure your $('theForm') selector is correct. Typically you should specify by ID or a more specific selector, like $('#theForm'), when selecting the element <form id="theForm">...</form>.

Upvotes: 0

Related Questions