Michael Swartz Michael Swartz - 4 months ago 8
CSS Question

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>




Answer

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();
});