Can't assign variable in jQuery function

Question

So I have a button that is supposed to make a variable "quote" from running a function. Then us jQuery to display the quote on the page, but whenever I try and assign the variable the jQuery function just stops right there and nothing happens. I have no clue whats getting caught up. Here's the button code and javascript.Thanks a lot!

<button class="btn btn-primary" id="quoteBtn">new quote</button>


var quote = quote();

function quote() {
  var num = randomRange(1, 3);
  switch (num) {
    case 1:
      return ["hat.", "- hatboy"];
    case 2:
      return ["shoes.", "- shoeboy"];
    case 3:
      return ["belt.", "- beltboy"];
  }
}
function randomRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
  $("#quoteBtn").on("click", function() {
    var quote = quote();
    $("h2").html("<i class=\"fa fa-quote-left fa-lg\"></i>" + " " + quote[0]);
    $("#author").html(quote[1]);
  });
  $("h2").html("<i class=\"fa fa-quote-left fa-lg\"></i>" + " " + quote[0]);
  $("#author").html(quote[1]);

});

how about the link to the codepen? or at least create on on stack overflow... — I wrestled a bear once.
– I wrestled a bear once., Commented Dec 27, 2016 at 21:10
Perhaps your variable var quote should have a different name. I think it might overwrite your function quote. — putvande
– putvande, Commented Dec 27, 2016 at 21:11

Austin Greco · Accepted Answer · 2016-12-27 21:13:19Z

You have a variable and a function named the same. You should name your function something different so they don't collide (ie. getQuote()):

var quote = getQuote();

function getQuote() {
  var num = randomRange(1, 3);
  switch (num) {
    case 1:
      return ["hat.", "- hatboy"];
    case 2:
      return ["shoes.", "- shoeboy"];
    case 3:
      return ["belt.", "- beltboy"];
  }
}
function randomRange(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
  $("#quoteBtn").on("click", function() {
    var quote = getQuote();
    $("h2").html("<i class=\"fa fa-quote-left fa-lg\"></i>" + " " + quote[0]);
    $("#author").html(quote[1]);
  });
  $("h2").html("<i class=\"fa fa-quote-left fa-lg\"></i>" + " " + quote[0]);
  $("#author").html(quote[1]);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="quoteBtn">Quote</button>
<h2></h2>
<div id="author"></div>

Collectives™ on Stack Overflow

Can't assign variable in jQuery function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related