Random quote project issue

Random quote project issue
0

#1

My random quote project is giving me a loading issue. Any thoughts as to what this could be ?https://codepen.io/maxsun1/pen/RZppMK


#2

Your code shows:

function getQuote{

The correct syntax for a function would be:

function getQuote() {

You were missing the opening and closing parentheses. A red dot on the right showed in your code. If you were to click on that red dot, it will highlight the problem area in your code. After you fix the above, you will get another red dot to fix something. You may have several syntax issues to fix before you get could that will run. You just have to read the message and figure out what it is referring to.


#3

Thank you but I am still experiencing loading issues.


#4

I guess I’m not really understanding the problems though. It says unexpected token illegal. That doesn’t really specify what is is I am supposed to change.


#5

If you look in the general vicinity of the message “Unexpected token ILLEGAL”, you will see the following code:

#("newQuote).on("click", function(){
});

Do you see anything that does not look like correct syntax? I see 2 problems.

The particular error you are see is that JS has come across character which it does not know how to deal with. It can’t tell you what to do, because it does not know your intent.


#6

Nice I got it working. Thank you.


#7

Glad to see you figured that out. Now, you just have to fix several typos in your code that are causing it to not work as expected.

Remember, in JavaScript, variable names are case-sensitive, so randomquote is not the same thing as randomeQuote.

Also remember that when you are using JQuery (which you are), if you want to refer to an element with a class it would be:

$(".classNameGoesHere")

If you want to refer to an element with an id, it would be:

$("#IdNameGoesHere")

#8

got it. I am curious however as to why I don’t have a box around my “tweet out” tab but there is one around my “random quote” tab?


#9

That is because you created the newQuote element as a button and gave it the the classes “btn” and “btn-default” which have special properties defined since you are using Bootstrap. You created the tweet element as an anchor element and gave it the classes class=“btn” and “btn-default”. You should review the documentation for Bootstrap to see what classes you can use for anchor tags. The ones you assigned may not be valid Bootstrap syntax.


#10

I change it from a href to <button class and it worked! thank again.


#11

now my buttons aren’t working? https://codepen.io/maxsun1/pen/RZppMK


#12

Your code has:

$("#newQuote").on("click", function(){

so JQuery looks for an element with an id = “newQuote”. When I look at your HTML, you have button with id = "newQuote ". That space at the end makes the id completely different. You have to be very careful not to add extra spaces, symbols or wrong case when using JavaScript.

UPDATE: You need to have a look at the HTML for the following button. It has some other issues which might be a problem for you in the future:

<button class="btn btn-default type =" submit " id ="newQuote ">New Quote button </button>

#13

I’m lost. I can’t figure out why it’s still not working.


#14

Whenever things do not work like you think they should, always check the console (Ctrl + Shft + I on Chrome). You have an error:

Uncaught RangeError: Maximum call stack size exceeded           pen.js:55

If you click on that pen.js:55 link in the upper right hand side of the console, it will highlight the code that is causing the problem. It highlights the declaration of the getQuote function (line 2 of your code). You put a call to getQuote() on line 6 within the function getQuote itself. You have created a recursive call (function calling itself), but JS only allows so many calls to the stack. You need to call getQuote in the click handler for the “New Quote” button.

Based on all the problems you have been having with your code, I recommend going back through all the Basic JavaScript, Basic Algorithm Scripting, and JSON APIs and Ajax sections, before moving on. I don’t know if you solved all those challenges by yourself or had to have a lot of help to solve them. Either way, it would be worth your time to redo those challenges to solidify your understanding of these coding basics. When you can solve all those challenges with no assistance, you will find the this project and the more advanced Intermediate Front End Development will be easier to approach. There is nothing you should not already have learned to prevent you from creating this project. Once you learn more advanced topics, you can always come back to this project and make it work more elegantly.

One other suggestion I have for you is to learn how to use the console.log statement to help you debug certain sections of code. I can’t tell you how many times I will use a console.log(‘Got Here’) to confirm my code makes it to a particular section of code. If I don’t see the “Got Here” in the console, then I know something was wrong with my code before that console.log statement.


#15

I will check that out. I kinda burned though a lot of the lessons pretty quick so I forgot quite a bit of the information. You are right though, I should probably go back through some of it to get a better grasp of what it is I am trying to accomplish. Thanks for all the help.


#16

No problem. It is easy to go really fast (like a race) and get that “Successfully Completed” message. As I have been learning JavaScript over the past 7-8 months, I sometimes will randomly select one of the past challenges and rewrite it from scratch, to familiarize myself with concepts that I may not use everyday.

FYI - I only have to make 4-5 small changes to your existing code to get it to work. Most of the problems you have left are typos in your variable names.