My problem is that I have a button and I created stuff that executes when you click the button, but now I need that when I load the page, the stuff executes like if I had pressed the button.
I have a very simple page that every time I click a button "New Quote", it shows me a new quote, my problem is that when I load the page, the quote that shows up is not from jquery, but the HTML one. If I get what I want, a new quote should show up instead of the default one from HTML.
I tried to create a general function like randomQuote () { stuff } then do this $("#getMessage").on("click", randomQuote());
But it did not work, I am a newbie in JS! I hope you guys can help! Thank you a lot.
$(document).ready(function() {
var url = ('https://api.myjson.com/bins/gi3r7');
function pastelColor() { // LBH QVQ VG!
var newArr = '';
for (var i = 0; i < 6; i++) {
var random = Math.floor((Math.random() * 10) + 1);
newArr += String.fromCharCode((random % 5) + 65);
}
return newArr;
}
$("#getMessage").on("click", function(ev) {
$("body").css("background-color", '#' + pastelColor());
// $("body").css("background-color", '#'+((1<<24)*(Math.random()+1)|0).toString(16).substr(1));
$.getJSON(url, function(json) {
var html = "";
var random = Math.floor((Math.random() * Object.keys(json).length) + 1);
while (json[random].quote.length > 150) {
random = Math.floor((Math.random() * Object.keys(json).length) + 1);
}
html += "<h2>" + json[random].quote + "</h2>";
html += "<footer>" + json[random].author + " in <cite>" + json[random].source + "</cite></footer><br>";
// Thanks to chris-francis from Stackoverflow for providing the solution below!
// http://stackoverflow.com/questions/10486354/dynamically-change-tweet-button-data-text-contents
ev.preventDefault();
$('#tweetBtn iframe').remove();
var tweetBtn = $('<a></a>')
.addClass('twitter-share-button')
.attr('data-size', 'large')
.attr('data-hashtags', 'freecodecamp')
.attr('href', 'http://twitter.com/share')
.attr('data-text', json[random].quote + " by " + json[random].author);
$('#tweetBtn').append(tweetBtn);
twttr.widgets.load();
$(".quote").html(html);
});
});
});body {
background: orange;
}
.block {
left: 30%;
width: 40%;
height: 35%;
top: 30%;
position: absolute;
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Random Quotes</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<!-- <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script> -->
</head>
<body>
<div class="container-fluid">
<div class="block">
<div class="quote">
<h2>"All we have to decide is what to do with the time that is given to us."</h2>
<footer>Gandalf in
<cite title="Source Title">The Lord of the Rings</cite>
</footer>
<br>
</div>
<div class="row">
<button type="button" id="getMessage" class="btn btn-primary twitter-share-button">New Quote</button>
</div>
<div id="tweetBtn">
<br>
<a class="twitter-share-button" href="http://twitter.com/share" data-size="large" data-text="'All we have to decide is what to do with the time that is given to us.'" data-hashtags="freecodecamp" data-show-count="false">Share</a>
<script>
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
</script>
</div>
</div>
</div>
</body>
</html>
