Creating a quote machine

1

Hello,

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…

// Mike

3

OK, first of all your HTML is a mess. In codepen you don’t need head and html tags. And you have other tags that don’t have their mate and you have script and style tags that aren’t needed. When I clean it up, I get:


<body style="background-color:purple;">
  <h1 id="QuoteMachine"><i>Your Free Quote Generator </i></h1>
  <div id="MainBox">
    <h1> Press on Generate, to get a quote! </h1>
    <button id = "GenerateButton" class = "btn btn-primary">Get Message</button>
  </div>
</body>

OK, now in your JavaScript, you’re almost there. But when you target an element ID, you have to put a pound in front of it. Without anything, JQuery things it is an element (like ‘body’ or ‘div’) so you need to target #GenerateButton in your click assignment. When I do that and put 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).

1 Like
4

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.

5

Great advice above, once you’ve done all that you’ll want to create a quote container div in your html as such

<div id='quot-cont'></div>

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

:slight_smile:

6

Waiting for help with my challenge so I decided to show you a working example while keeping your code pretty much the same :smile:

$(document).ready(function() {
    
    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];
    
   $("#GenerateButton").on("click", function(){
    

   var randomIndex = Math.floor(Math.random() * allArrays.length); 
     
     var post = allArrays[randomIndex];
     
     $('#quot-cont').text(post);
     


});
  });

^Works.
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>
    <div id='quot-cont'></div>
  <button id = "GenerateButton" class = "btn btn-primary">
        Get Message
    </button></h1>

The html is still wrong but it works haha

7

Sometimes i miss so small things that can take time to finish a project, thank you for the help!! It worked :slight_smile:

8

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!!
//Mike

9

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. :slight_smile: