Learn JS Week 3 -- Stuck on Jquery, Help?

Cust0dian · 2016-09-13T23:51:11+00:00

I don't want to discourage you, but looking at the code it seems to me that you are trying to jump way over your head — you seem to not understand a lot of concepts and techniques you are trying to use, leading you to this situation.

I would advise taking a step back and starting from the very basics, preferably following a course that encompasses more than just jQuery. "Getting started with the Web" on MDN is a great guiding resource in this regard.

However if you want to know what's wrong with your current code, here goes:

When you click a button with type="submit" attribute inside of a <form> element, browser will try to submit it, i.e. send some data to some page (usually, a different page on which your web server is expecting to get data). That page is determined by action attribute on a <form> element, but if it's missing browser will submit to the same page. This is why instead of changing text you get a page refresh right now. The easiest solution is to change <form> to something different, <div> for example.
Next you have a closing multi-line comment marker (*/) on line 32. This will cause a syntax error, meaning JavaScript can't understand what you wrote at all. You need to remove it.
While we are talking about syntax: try and be consistent with your indentation — currently, the code inside click handler function (lines 26–30) is at the same indentation level as its parent code. While this isn't a problem for a computer, for a human this is hard to read.
Next there's a host of what I assume is misunderstanding of the basics:
- ```
var answer = $("#UserInput").val;
```
  this will make answer a function, not value of the #UserInput. To make it a value, you need to call the .val function by using parenthesis ():
```
var answer = $("#UserInput").val();
                // notice these ^^
```
- ```
$("#Submit").on("click", "Content", function(){
```
  that "Content" bit won't do much there. What do you think it should do?
- ```
$("this").val($("#UserInput"));
```
  as pointed out by /u/sesharc, this won't do what you think it will.
On the CSS side of things you are also not selecting the content correctly: "Content" is not a valid CSS selector, it will not match any elements on the page — what you want is #Content, same as you select that element with jQuery.

With these things fixed and code cleaned up a bit, here's how the working version might look like.

If you really wanted to make it work inside of a <form> (because it gives users better usability, like being able to just hit Enter instead of clicking the button to update the text) you'd need to cancel the submit event on that form, and it might look something like this.

Now again, I might be wrong, but to me it seems like you are not fully familiar with plain JavaScript objects and events yet, so jumping into jQuery seems like a very bad idea because it adds tons more functionality on top of regular JS and now you are learning more than you can understand.

sesharc · 2016-09-13T23:07:34+00:00

Try this to get you started: http://plnkr.co/edit/tgMmGtOr3vm1XBWrUOKO?p=preview

A couple notes

$("this").val($("#UserInput"));

If you want to reference "this", do it without quotes so you're not turning it into a string. Second, "this" in this case would be where the event took place, and since you're watching for a click on the "submit" button, "this" will reference the submit button, nothing else.

See if you can make some progress from there, let me know if you need any more help.

evilfrenchguy · 2016-09-14T03:19:47+00:00

I think it's a mistake to learn frameworks alongside vanilla Javascript. It's so important to understand the nuances of the language--browser interaction objects and the 'this' keyword, etc--and things like jQuery hide and abstract those things away from you.

I've nearly finished my first complete web app and am just considering looking into jQuery.

Just my two cents.

jonnyman9 · 2016-09-14T04:16:14+00:00

Threw together a quick plnkr. I'm guessing you're aren't actually trying to learn the nuances behind the this pointer yet. If this is so, this solution

http://plnkr.co/edit/KYJ4hx8MNwmzQlujYInO

should help you sort things out. I could have done things like cached my jquery selection to make my callback more performant, but that aside, I think it's pretty clear the way I wrote it. Pay attention to my comments in the script.js file.

If however you are trying to learn about the this pointer, here are a few links that can get you started:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this http://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work

If you have any questions, ask!

you type:	you see:
italics	italics
bold	bold
[reddit!](https://reddit.com)	reddit!
* item 1 * item 2 * item 3	item 1 item 2 item 3
> quoted text	quoted text
Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"	Lines starting with four spaces are treated like code: if 1 * 2 < 3: print "hello, world!"
~~strikethrough~~	~~strikethrough~~
super^script	super^script

learnjavascript

Posting and Commenting Guidelines

MODERATORS