Trouble getting random quote generator to work

So I’m working on the random quote generator project and can’t seem to get my “New Quote” button to work. I feel like it’s probably because of something small like a spelling mistake but I’ve looked over it again and again for the past 30 and can’t find what I’m doing wrong here. Could someone help me out?

https://www.w3schools.com/jsref/event_onclick.asp

I think your answer lies in a typo. Model after the code in the link.

Still not quite clicking. Would I still do that if I’m trying to use JQuerry? Tried adding onclick=“function()” to my “new quote” button and a few other variants. The onclick=“function()” is suppose to be referencing my jquerry right?

jQuery on() method not onclick

1 Like

1 - Forget the inline function assignment in the html on the button
2- include a jQuery
3- fix the jQuery on() method

It works to me

1 Like

Sorry for how dumb these questions are, but when you say “Include a JQuery” you mean…?

OH!! Got it!! Thanks!! :slight_smile:

1 Like

you need to refer to a jQuery file somewhere on the internet.

I was about to go to sleep, so here is the solution.

I just finished this project using React/Redux for the Beta curriculum. Are you using the production site? (not beta.freecodecamp.org, freecodecamp.org?) I’m not super-familiar with jQuery, given that it’s a bloated library that has had a lot of its functionality subsumed by the the updates to HTML, CSS, and Javascript. But, I’ll take a swing.

Part of the problem is that you aren’t actually calling a function from the button’s onclick event. As far as I know, function is a type declaration in Javascript, like:

<button onclick="loadNewQuote()">New Quote</button>
<script>
  function loadNewQuote() {
    document.getElementById("quote").innerHTML = "Next quote goes here";
  }
</script>

What’s going on here: The onclick attribute has assigned to it the function call loadNewQuote() [The trailing () calls the function with no arguments, rather than referencing the function object by writing its name without the ()].

The function is defined inside the <script> element above, but in your codepen, you would just put all your Javascript in the JS pane, and it would work the same way. The function declaration is the statement that defines what the function does and labels it with a name. The declaration statement goes:
function yourFunctionName (parameters, go, here){
//do stuff here. You can reference the parameters here because they were declared in the line above.
}
Notice that the function declaration doesn’t require a semicolon after the last curly brace.

Hope that helps.

1 Like