my problem have button , created stuff executes when click button, need when load page, stuff executes if had pressed button.
i have simple page every time click button "new quote", shows me new quote, problem when load page, quote shows not jquery, html one. if want, new quote should show instead of default 1 html.
i tried create general function randomquote () { stuff } $("#getmessage").on("click", randomquote());
but did not work, newbie in js! hope guys can help! thank lot.
$(document).ready(function() { var url = ('https://api.myjson.com/bins/gi3r7'); function pastelcolor() { // lbh qvq vg! var newarr = ''; (var = 0; < 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>"; // chris-francis stackoverflow providing 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 + " " + 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 , 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 have decide time given us."</h2> <footer>gandalf in <cite title="source title">the lord of 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 have decide time given 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>
you did
$("#getmessage").on("click", randomquote()); randomquote() calls function. randomquote this
$("#getmessage").on("click", randomquote); and should work fine.
Comments
Post a Comment