Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Greg Schudel
Greg Schudel
4,090 Points

Making object game based on JS object oriented course...need help.

I'm trying to learn OOP in JS better by making code that involves objects, constructors and prototypes. I've made a simple game using a prev project from that course. It is located here: https://jsfiddle.net/gjschudel/dbxgnLmc/1/#&togetherjs=ETS7QCi5Dv

Any edits are welcomed, I'm stuck early on. I know what I need to do (where to use conditionals, objects etc) just confused on the "how" (the syntax) on how to do it.

any suggestions are GREATLY appreciated.

Steven Parker
Steven Parker
230,274 Points

Perhaps you could show some pseudo-code for the things you are unsure of syntax for.

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points

You're making great progress with ES6, but all the stuff you're trying to do makes a lot of sense with jQuery. That should answer most of the how-to for you. You can learn about it here on Treehouse.

https://teamtreehouse.com/library/introduction-to-jquery
https://teamtreehouse.com/library/jquery-basics

Here's a simple jQuery program which gets input from a button and updates the UI. This is what you were trying to do right?

https://jsfiddle.net/k0cp5h2x/1/

Greg Schudel
Greg Schudel
4,090 Points

You're making great progress with ES6, but all the stuff you're trying to do makes a lot of sense with jQuery. That should >answer most of the how-to for you. You can learn about it here on Treehouse.

Josh, learning another library ontop of just learning straight vanilla JS is gonna be too much at this moment. I intend on learning react.js in the near future for my job. I know I need to learn AS MUCH JS as I can before I tackle that beast.I wanted to really dive into OOP because it seems to be at the heart of javascript and not knowing how to tackle projects like this on my own has me a bit worried about my skill level.

Thanks for the suggestion though.

jobbol
seal-mask
.a{fill-rule:evenodd;}techdegree
jobbol
Full Stack JavaScript Techdegree Student 16,610 Points

That's okay. You don't have to absorb everything, and I get that. It's all too overwhelming when people are telling you to learn all the different things. For your game with vanilla JS and making interactions with the user, look into the DOM.

https://teamtreehouse.com/library/javascript-and-the-dom-2

The DOM in general isn't something you should skip, as it's a building block. Literally it's how the web browser sees elements on a page and puts them together.

Vanilla JS though, isn't for building complex programs in. Move to React as soon as you can. You'll save yourself a ton of headaches.

2 Answers

Steven Parker
Steven Parker
230,274 Points

I love Codepen, but I was intrigued by the "collaborate" feature of jsfiddle and was hoping to meet you on it sometime (might require scheduling).

Functions in onclick are deprecated? As in not supported? I know it was never considered a good practice but I thought it still worked. Where did you hear/read this?

But the better practice is to use the JS code to either assign onclick or just attach a new listener.

And I can sympathize about MDN, but it's really the best reference, so becoming comfortable with it will really pay off.

Greg Schudel
Greg Schudel
4,090 Points

Steven, I would be honored to meet up with you if you want! I plan on adding to this project and learning as much as I can so I can tackle another project for getting better!

Functions in onclick are deprecated? As in not supported? I know it was never considered a good practice but I thought it still worked. Where did you hear/read this?

MDN suggests against using the onclick attribute, but I cannot implement their solution in my code. They suggest making a function for it, can you help me?

Their suggestion is here: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

On another note, I cannot make the solution I have work in JS fiddle. It works fine in straight HTML, but not in JSfiddle. I was told to config JS fiddle to a "no-wrap" for JS, but I am not sure what that is or how to do that in JSfiddle.

My codepen account works fine with my code though. https://codepen.io/webwatchman/pen/gxZBzO

Also see inline javascript handlers under here: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

Greg Schudel
Greg Schudel
4,090 Points

Got some more code on this from another forum. Making progress I guess (the whole purpose is to learn on a personal project). But what's happened is that I tried to do something on my own only to get stuck and then asked for help for someone who wrote about half the code. I have something that works and is what I want on CodePen

https://codepen.io/webwatchman/pen/gxZBzO

However, I am being told that putting a function in the HTML onclick attribute has been depreciated. Does anyone have more elegant solution? Using ES6 is welcome, just let me know when your using it! I still a novice whose just struggling on how to learn the process of building JS projects (and hoping I'm not avoiding the process of learning by asking for help! lol)

And please don't refer me to MDN, I still am struggling to understand everything they write about.