CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap-3
Michael Swartz
Michael Swartz

Reputation: 858

Button not properly updating output

I'm coding a randon quote machine and I'm having a problem when the "New Quote" button is clicked. In the interest of brevity, the data for the quotes, colors and animations variables have been simplified and scaled down. So the problem is this. As I keep clicking the button and with a smaller set of data I've noticed that the response time gets longer and that either the colors, quotes, and/or the animations don't change. This is evident in that the animation doesn't always run. With this smaller set of data I understand that it's possible that the new output can be exactly the same as the previous output but the animation should still run and sometimes it doesn't. This code runs correctly if there's no loadQuotes() function and no window.onload = loadQuotes(); and I press F5 on the keyboard to reload the page. The problem starts when I put the code inside the loadQuotes() function and use window.onload = loadQuotes(); at the bottom of the page to get the initial output. I tried moving all of the variables and the randomNum() function outside the loadQuotes() function (because I'm assuming they're global) and when I did that then after the initial page load, clicking the button doesn't do anything at all. So my concern is how to get the page to load as described above by pressing F5 but by clicking the button.

function loadQuotes() {
  function randomNum(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var quotes = [
    ["This is quote number one.", "Person 1"],
    ["This is quote number two.", "Person 2"],
    ["This is quote number three.", "Person 3"],
    ["This is quote number four.", "Person 4"],
    ["This is quote number five.", "Person 5"]
  ]

  var colors = [
    ["#096986", "#F69679"],
    ["#000866", "#FFF799"],
    ["#7D3563", "#82CA9C"]
  ]

  var animations = ["animated bounce", "animated flash", "animated pulse"]

  var getQuotes = randomNum(0, quotes.length - 1);
  var getColors = randomNum(0, colors.length - 1);

  var newColor0 = colors[getColors][0];
  var newColor1 = colors[getColors][1];
  var newAnimation1 = animations[randomNum(0, animations.length - 1)]
  var newAnimation2 = animations[randomNum(0, animations.length - 1)]

  document.getElementById("quote").innerHTML = "<h1>" + quotes[getQuotes][0] + "</h1>";
  document.getElementById("author").innerHTML = "<h3>" + "--- " + quotes[getQuotes][1] + "</h3>";

  $(document).ready(function() {
    $(".side-panel").css("background-color", newColor0);
    $(".middle").css("background-color", newColor1);
    $("#quote").addClass(newAnimation1);
    $("#author").addClass(newAnimation2);
    $(".btn").on("click", function() {
      loadQuotes();
    });
  });
}

window.onload = loadQuotes();
h1 {
  text-align: center;
  font-size: 3.5em;
}
h3 {
  font-size: 1.5em;
}
/* div { border: 1px solid black; } */

.full-height {
  height: 100vh;
}
.side-panel {
  background-color: newColor0;
}
.middle {
  background-color: newColor1;
}
.quote-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 65%;
  border-radius: 7.5%;
  background-color: #FFFFFF;
}
.quote-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 50%;
}
<!DOCTYPE html>

<html lang="en-us">

<head>
  <title>Random Quote Machine</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
  <link rel="stylesheet" href="style.css" />

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-1 side-panel full-height"></div>
      <div class="col-xs-10 middle full-height">
        <div class="quote-box">
          <div class="quote-text">
            <p id="quote"></p>
            <p id="author"></p>
            <button type="button" class="btn btn-lg pull-right">New Quote</button>
          </div>
        </div>
      </div>
      <div class="col-xs-1 side-panel full-height"></div>
    </div>
  </div>
</body>

</html>

Upvotes: 1

Views: 60

Answers (2)

Valentin Vrinceanu
Valentin Vrinceanu

Reputation: 679

The problem you are having is because you are calling the loadQuotes function inside itself, which makes a loop of clicks on click. My browser went up 3GB of ram use after a few clicks, so you need to get that out

I have done some changes here, that will help you: https://jsfiddle.net/qv5he9z0/6/

First of all i moved the javascript from html to the javascript panel.

All the code is now incapsulated inside:

$(document).ready(function () { });

All the variables are defined at the top of this, so you can update them where you need them and change their values in different function. Now they are global.

I have also replaced(because we have jQuery):

document.getElementById("quote").innerHTML = "<h1>" + quotes[getQuotes][0] + "</h1>";

with

$("#quote").html("<h1>" + quotes[getQuotes][0] + "</h1>");

and

document.getElementById("author").innerHTML = "<h3>" + "--- " + quotes[getQuotes][1] + "</h3>";

with

$("#author").html("<h3>" + "--- " + quotes[getQuotes][1] + "</h3>");

I have also move the following code outside loadQuotes function(so we don't have loops of clicks on click):

$(".btn").on("click", function() {
    loadQuotes();
});

Upvotes: 1

Duncan
Duncan

Reputation: 226

Your problem was the way you nested your functions.

I've moved your logic around and tidied things up.

Here is your code just placed in the correct places.

https://jsfiddle.net/hj5w5rdq/

var quotes =[
  ["This is quote number one.", "Person 1"], 
  ["This is quote number two.", "Person 2"], 
  ["This is quote number three.", "Person 3"], 
  ["This is quote number four.", "Person 4"], 
  ["This is quote number five.", "Person 5"]
];

var colors = [
["#096986", "#F69679"], 
["#000866", "#FFF799"], 
["#7D3563", "#82CA9C"]
];

var animations = [
  "animated bounce", 
  "animated flash", 
  "animated pulse"
];

var getQuotes,
        getColors,
    newColor0,
    newColor1,
    newAnimation1,
    newAnimation2;

function loadQuotes(){

  getQuotes = randomNum(0, quotes.length - 1);
  getColors = randomNum(0, colors.length - 1);
  newColor0 = colors[getColors][0] ;
  newColor1 = colors[getColors][1];
  newAnimation1 = animations[randomNum(0, animations.length - 1)]
  newAnimation2 = animations[randomNum(0, animations.length - 1)]

  document.getElementById("quote").innerHTML = "<h1>" + quotes[getQuotes][0] + "</h1>";
  document.getElementById("author").innerHTML = "<h3>" + "--- " + quotes[getQuotes][1] + "</h3>";

  $(".side-panel").css("background-color", newColor0);
  $(".middle").css("background-color", newColor1);
  $("#quote").addClass(newAnimation1);
  $("#author").addClass(newAnimation2);
}

function randomNum(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

$(document).ready(function() {
  $(".btn").on("click", function() {
    loadQuotes();
  });

  loadQuotes();
});

Upvotes: 2

Related Questions