Not a function error in JavaScript

Question

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 */ };

At bare minimum, show where U is defined and declare what libraries you're attempting to use. — Jaime Torres
– Jaime Torres, Commented Sep 27, 2013 at 13:43
Here is my html. Like I said Im pretty new so its probably stupid. — Heather Mosler
– Heather Mosler, Commented Sep 27, 2013 at 14:08

peernohell · Accepted Answer · 2013-09-27 14:52:33Z

2

just remove the last line of utilities.js

var U = { /* functions */ };

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

answered Sep 27, 2013 at 14:52

peernohell

8175 silver badges12 bronze badges

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

5 Comments

Heather Mosler Over a year ago

Ok did that now I get TypeError: U.$(...) is null

Heather Mosler Over a year ago

You guys are awesome btw

peernohell Over a year ago

Sorry i did't find. It's look like $(...) search after an id that do not exist. maybe a typo but I do not find it :/

peernohell Over a year ago

you have a typo here : U.$(events[i]); when have declare the var without ending "s"

Heather Mosler Over a year ago

now Im getting a U.addEvent(U.$('theForm').onsubmit = setHandlers); is null.

Bucket · Accepted Answer · 2013-09-27 14:27:12Z

0

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>.

edited Sep 27, 2013 at 14:27

answered Sep 27, 2013 at 13:45

Bucket

7,5599 gold badges38 silver badges48 bronze badges

2 Comments

Heather Mosler Over a year ago

Ugh I tryed that and still not working now I get "ReferenceError: $ is not defined" Like I said I know its something stupid probably.

Bucket Over a year ago

See the edit I made. I'm not sure what U is, but I'm going to roll with it, trusting that it's not a fluke ;)

Collectives™ on Stack Overflow

Not a function error in JavaScript

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related