StackOverflow Q - 45114491

https://stackoverflow.com/questions/45114491

by Amit Bhagat

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<button id="randomLinkButton">
  Random Page
</button>

JavaScript

function getRandomUrl() {

  // define your source JSON data file URL
  var url = '/echo/json/',
    def = $.Deferred();

  $.getJSON(url).done(function(data) {
    // received

    //-------Set data to some dummy date for test--Remove this----
    var data = {
      "pages": [{
        "url": "https://www.google.com/"
      }, {
        "url": "https://stackoverflow.com/"
      }, {
        "url": "https://www.twitter.com/"
      }, {
        "url": "https://www.facebook.com/"
      }, ]
    };
    //----------------------------------------------

    // get random index
    var randomIndex = Math.floor(Math.random() * data.pages.length);

    // resolve with random URL
    def.resolve(data.pages[randomIndex].url);

  }).fail(function(error) {

    // failed
    def.reject(error);
  });

  return def;
}

$(document).ready(function() {

  // Get target button and assign click handler
  var targetElement = $('#randomLinkButton');

  targetElement.click(function() {

    // get redirect url from attribute
    var redirectUrl = targetElement.attr('data-url');

    // disable button to avoid clicking again
    targetElement.prop('disabled', true);

    alert('Redirecting to: ' + redirectUrl);

    // read URL from 'data-url' attribute and redirect
    window.location.href = redirectUrl;

  });

  getRandomUrl().done(function(url) {

    // save URL in attribute
    $('#randomLinkButton').attr('data-url', url);

  }).fail(function() {

    // failed
  });

});