[SOLVED] How can I set a quote default as soon as page loads?

[SOLVED] How can I set a quote default as soon as page loads?
0.0 0

#1

I want to set a quote default as soon as page loads not when a user clicked.

My code -->
var quote = [
“I love you the more in that I believe you had liked me for my own sake and for nothing else.”,
“But man is not made for defeat. A man can be destroyed but not defeated.”,
“When you reach the end of your rope, tie a knot in it and hang on.”,
“There is nothing permanent except change.”,
“You cannot shake hands with a clenched fist.”,
“Let us sacrifice our today so that our children can have a better tomorrow.”,
];

    $('.get-quote').on('click', function(event) {
      event.preventDefault();
      randomQuote = quote[Math.floor(Math.random() * (quote.length))];
      document.getElementById("quote_slider").innerHTML = randomQuote;

      //var randomQuote = Math.floor(Math.random() * (quote.length));
      //document.getElementById("quote_slider").innerHTML = quote[randomQuote];
    });

    $(document).ready(function() {

          $('.share-quote').on('click', function(event) {
          event.preventDefault();
            window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(randomQuote + ' -- '))
          //window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(quote + ' -- '))
        });
      });

Thank you for your help :slight_smile:


#2

Wrap those lines in their own function. Then you can call that function from the click handler but also in document ready.


#3

I did it but still does not work. Here is my codepen if you do not mind to look at it. http://codepen.io/krittiyaclark/pen/xdLLWo


#4

Note that your function only outputs a quote on a click event. You should create a function that returns a quote. Then call it on two occasions: inside the click event, and on document load.


#5

I don’t want to completely give it to you. I’m talking about separating out the part that puts a quote on the screen from the click handler.

but here is the basic layout you need -

$(document).ready(function() { 
  
  function showQuote() {
    /* Only code having to do with putting a quote on the screen. 
      This is just the function definition - it isn't called yet.
      Don't put the click handler in here. */
  }
  
  function share() {
    /* Only code having to do with sharing to Twitter.
      This is just the function definition - it isn't called yet.
      Don't put the click handler in here. */
  }
  
  // this is a click handler - it won't fire until clicked
  // it just sits there and listens for that click
  $('.get-quote').on('click', function(event){
    event.preventDefault();
    showQuote(); // re-calling to put up new quote
  });
  
  // this is a click handler - it won't fire until clicked
  // it just sits there and listens for that click
  $('.share-quote').on('click', function(event) {
    event.preventDefault();
    window.open('https://twitter.com/intent/tweet?text=' + encodeURIComponent(randomQuote + ' -- '))
  });


  // this is the only part of your code that will actually run at first
  showQuote(); // Here we call the function to put the first quote up

});

#6

Sorry, krittiyaclark, I made a mistake in the “code” in the above post. I’ve corrected it now.


#7

It works! Can you explain me why it had to be that way? I am not good at it. I try to learn.

Thank you :slight_smile:


#8

Maybe had to be is too strong of a word. But this is logical. Let’s make sure we understand some things.

Click handlers ($(’.share-quote’).on(‘click’…) aren’t called until you click something. If you put your code for showQuote inside there, it can’t be called until you click on the button. And declaring a function doesn’t cause it to run, it just says *here’s a bunch of instructions you can call by name if you want".

You want the declaration for showQuote to be outside of that click handler. That way you can still call it from inside your click handler but can also call it from the main part of the code so a quote can load up at start. If you genuinely didn’t care if there was quote before the click, then putting that code inside the click handler would be just fine. But since we want a quote at the beginning, we need that block of code somewhere accessible to both places - a function is perfect for that. The other option would be to write that code twice, but that is bad practice. Modularizing things into functions is a good thing to do.

Does that clear it up?

Trace through the code and see what happens. When we get to function showQuote(), nothing happens, that is just a function definition. When we get to function share() nothing happens, we’re just defining the function. When we get to $(’.get-quote’).on(‘click’, function(event)… nothing happens except that now the browser is “listening” to that button and will run that function if the button is clicked. Similarly, $(’.share-quote’).on(‘click’, function(event)… doesn’t do anything except tell the browser to listen to another button and tells it what to do if it’s clicked.

So far everything is just function definitions and click listeners. When we get to the line showQuote(); finally we do something. This tells it to run the function that we defined earlier, putting a quote on the screen. Then the browser sits and waits. And waits. And waits. All it’s doing is listening to those two buttons. It waits. And waits. If you click the quote button, it runs showQuote again and puts a new quote up. If you click share, it runs that. And then it waits, and waits, and waits for the next click.

Let us know if any of that is not clear.


#9

That makes sense. Thank you for taking time to wrote it.