Hey,
I have a short Noob-like question. I wanted to change the color of the random quote when clicking on the respective button. However, the color seems to change at first but then changes back to the initial blue immediately afterwards. My question is: what is $(".quotation").css(“color”, num); doing here? Why does it switch back to blue? Thank you in advance for your help!
$(document).ready(function() {
$("#getQuote").on("click", function(){
var num = "#" + Math.random().toString(16).slice(2,8);
$(".quotation").css("color", num);
$.ajax({
type: 'GET',
url: 'https://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?',
dataType: "JSONP", // data type expected from server
success: function(data) {
var html ="";
var keys = Object.keys(data);
html += '<div class="quote">';
keys.forEach(function(key){
if(key == "quoteText"){
html += '<div class="quotation">' + data[key] + '</div>';
} else if(key == "quoteAuthor"){
html += '<div class="author">' + data[key] + '</div>';
}
});
html += "</div>";
$("#output").html(html);
},
error: function() {
$("#output").html("Something went <strong> wrong </strong>. Terribly <strong>wrong</strong>.");
}
}); //Ajax
}); //Click-event
}); //Document-loading