I am new here and i really need some help with this, so i hope you can help.
Nothing happens when i press the button, i tried everything to make it work but it seem pointless.
I just need to make the function work with jquery but nothing happens, it feels like i am missing something really basic over here…
You have one small issue with your click event handler. You have:
Since GenerateButton is an id of a button, you need to preface it with #
Fixing the above problem will technically make the anonymous function run. However, it is not going to display anything on the page, because you have not told it to do so.
To confirm the function is doing something, copy the following code and paste right above your commented out return statement:
alert("Yeah!!! You created a randomIndex variable with a value of " + randomIndex +
", but now you need to use it to get data back from your allArrays array.");
OK, first of all your HTML is a mess. In codepen you don’t need
html tags. And you have other tags that don’t have their mate and you have
style tags that aren’t needed. When I clean it up, I get:
<h1 id="QuoteMachine"><i>Your Free Quote Generator </i></h1>
<h1> Press on Generate, to get a quote! </h1>
<button id = "GenerateButton" class = "btn btn-primary">Get Message</button>
console.log(allArrays[randomIndex]); at the end of the click handler, I get a random quote in the browser console (CTRL-SHFT-J to open).
You also might consider your assignment of the quote string. You can assign an array of strings in one step, like:
var allArrays = [
"This is quote one.",
"This is quote two.",
"This is quote three."
Also, if you did that globally (like at the beginning or the end of the file) then it would get it out of the way and leave the meat of your code less cluttered.
Great advice above, once you’ve done all that you’ll want to create a quote container div in your html as such
then in your script to have your quote show up on the page you need code like this
$('#quot-cont').html(//insert fixed array variable here);
or you could do
$('#quot-cont').text(//insert fixed array variable here);
^this is probably simpler because it inserts your quote directly. If you use .html you have more customization as you can make it a p tag and give it a class or id which allows you to maybe change font,color, or size
Waiting for help with my challenge so I decided to show you a working example while keeping your code pretty much the same
var quote1 = "Good, better, best. Never let it rest. 'Til your good is better and your better is best. St. Jerome";
var quote2 ="Some days are just bad days, that's all. You have to experience sadness to know happiness, and I remind myself that not every day is going to be a good day, that's just the way it is! Dita Von Teese";
var quote3 = "For beautiful eyes, look for the good in others; for beautiful lips, speak only words of kindness; and for poise, walk with the knowledge that you are never alone. Audrey Hepburn";
var quote4 ="The good life is one inspired by love and guided by knowledge. Bertrand Russell";
var quote5 = "Love is friendship that has caught fire. It is quiet understanding, mutual confidence, sharing and forgiving. It is loyalty through good and bad times. It settles for less than perfection and makes allowances for human weaknesses. Ann Landers";
var allArrays = [quote1, quote2, quote3, quote4, quote5];
var randomIndex = Math.floor(Math.random() * allArrays.length);
var post = allArrays[randomIndex];
Any questions let me know.
You should reaffirm your grasp on html as some of your html is kind of nonsensical. Good luck!!
Oh an on the html side
<div id="MainBox"><h1> Press on Generate, to get a quote! </h1>
<button id = "GenerateButton" class = "btn btn-primary">
The html is still wrong but it works haha
Sometimes i miss so small things that can take time to finish a project, thank you for the help!! It worked
It was really a mess man, thank you for helping me with this. I really need to get a better structure when i code.
Very helpful reply, thanks a lot!!
Yeah, it’s a good isea to clean as you go and use proper indenting to make things clear. It’s easy to say, “I’ll come back and fix these later after I figure this out”, but those things add up and often get in the way of what you’really trying to do. Just make clean code a habit.