Creating a set of functions in JQuery

Question

So I'm trying to gain a better understanding of JQuery and its use for web content and web applications so just hear me out here please. The goal of this test page is to be able to use the buttons to change, create, and delete content. Another goal is to test out the functionality of using the "enter" key to click one of the buttons from the text box (simulating user the enter key to click a submit button). This is the code that I developed and I'm a bit confused on how to fix the error of "destroyContent" is not defined. Obviously my syntax is off but I'm not sure how to fix it. Could anybody assist and possibly point me towards some useful reference material?

The JQuery:

$(document).ready(function () {
    $('#Scan').keypress(keyHandler);
});
$.keyHandler = function (e) {
    if (e.which == 13) {
        $(this).blur();
        $('#destroy').focus().click()
    }
}
$.changeHeading1 = function () {
    x = document.getElementById("Heading1")
    x.innerHTML = "It has changed";
}
$.createContent = function () {
    var para = document.createElement("p");
    var node = document.createTextNode("This is new");
    para.appendChild(node);

    var element = document.getElementById("div1");
    element.appendChild(para);
}
$.destroyContent = function () {
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
}

(I promise it looks a lot better in my actual code, I just have a hard time formatting on here)

For the HTML:

<h1 id="Heading1" />
<p id="p1" />
<button type="text" id="Scan" />
<button type="button" onclick="changeHeading1()" />
<button type="button" onclick="createContent()" />
<button type="button" id="destroy" onclick="destroyContent()" />

Why are you creating these functions as methods of $ when they make no use of jQuery at all? — JJJ
– JJJ, Commented May 1, 2013 at 19:00
Well there in lies part of my confusion I suppose. I was just trying out a few things that I saw while searching around for how to create/define functions in JQuery and that was one thing I found. But apparently it doesn't apply to my situation. — Jfabs
– Jfabs, Commented May 1, 2013 at 19:02
There's a difference between JavaScript and jQuery. jQuery is just a library for accessing and manipulating the DOM, it's not a complete replacement of everything JavaScript has. — JJJ
– JJJ, Commented May 1, 2013 at 19:03
Right. I guess I'm just having trouble trying to mix the two of them. — Jfabs
– Jfabs, Commented May 1, 2013 at 19:09

Craig MacGregor · Accepted Answer · 2013-05-01 19:09:55Z

2

First thing that might help is $ is just a variable on the global namespace - which in this case is window. If you go to chrome console you'll see this by typing window.$. There is nothing special about it. There is also window.jQuery which is the same as window.$.

So when you access a function it will try and get the variable in the current scope. So when you do:

<button type="button" id="destroy" onclick="destroyContent()" />

It's the same as doing window.destroyContent(). If you want to access your version which is a property on the $ variable. So you can change it either of these:

onclick="$.destroyContent()"
onclick="window.$.destroyContent()"

But since you want to better understand jQuery I would avoid adding handlers (as most people will suggest) to the markup. Instead create handlers via jQuery for example:

$('#destroy').click(function() {
  var child = document.getElementById("p1");
  child.parentNode.removeChild(child);
});

Reading up on the jQuery events API will help better understand how to do this. They have great examples :)

answered May 1, 2013 at 19:09

Craig MacGregor

4,6391 gold badge23 silver badges13 bronze badges

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

7 Comments

Jfabs Over a year ago

I had actually considered going the route that you suggested at the bottom there and I know I could have gotten that correct, but then I couldn't think of a way to also make it so that pressing the enter key from the text box would also fire the click event

JJJ Over a year ago

Or just $('#destroy').click(function(){ $('#p1').remove(); });

JJJ Over a year ago

It doesn't make any difference if you have a click handler bound by .click() or with the onclick attribute, in regards of triggering the event from outside.

Craig MacGregor Over a year ago

You also don't need to do focus().click() just $('#destroy').click(). It will trigger the event handles automatically.

Craig MacGregor Over a year ago

@Jared In your original example you would need to use $.keyHandler I believe. I've put together a fiddle using your code which has the enter key working as you want (I think): jsfiddle.net/ZCNBW/2

|

Tom Smilack · Accepted Answer · 2013-05-01 19:01:20Z

2

You're creating destroyContent as a member of $ but not calling it that way:

$.destroyContent = function () { versus onclick="destroyContent()"

You should either define destroyContent outside of $ or call it with the $. One of these:

function destroyContent() {
    var child = document.getElementById("p1");
    child.parentNode.removeChild(child);
}

or

<button type="button" id="destroy" onclick="$.destroyContent()">

answered May 1, 2013 at 19:01

Tom Smilack

2,07315 silver badges20 bronze badges

7 Comments

Jfabs Over a year ago

Although I guess I didn't quite understand, if I created it just as 'function destroyContent(){...}' then I should call it as 'onclick="destroyContent"'?

Tom Smilack Over a year ago

If you create it that way, call it as onclick="destroyContent()" with parentheses. Or better yet, if you want to use jQuery, attach it to the button in code: $(function() { $('#destroy').click(destroyContent); });

Jfabs Over a year ago

Well that'as exactly what I have function destroyContent() {..} and onclick="destroyContent()" and I still get the same error: destroyContent is not defined. I'm wondering if it could have anything to do with the fact that my script has both javascript and jquery elements in it?

Tom Smilack Over a year ago

Do you have a jsfiddle or something where you can reproduce the error?

Tom Smilack Over a year ago

You can have multiple script tags. Put <script src="jquery..."></script> first and then <script>//your javascript code</script> after it.

|

Collectives™ on Stack Overflow

Creating a set of functions in JQuery

2 Answers 2

7 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related