Загрузка функций после загрузки страницы

Question

Я не могу понять, где я ошибся. Я стараюсь, чтобы он был выбран случайным индексом, затем из этого индекса выбирается и отображается соответствующий элемент в массиве. Однако в данный момент ничего не отображается. Я думаю, это связано с тем, что после загрузки страницы функции не загружаются, и я не уверен, как это сделать правильно. Если вы видите какие-либо другие ошибки в моем текущем коде, пожалуйста, не стесняйтесь оставлять некоторые отзывы. Спасибо :)

JS

<script type="text/javascript"> 
    $(document).ready(function() { 
     function getRandomVideo() { 
      //Arrays for videos, titles, images, and searches 
      var videos = ['https://www.youtube.com/embed/kiTO7c_qeZs', 'https://www.youtube.com/embed/z4Hfv00eqoI', 'https://www.youtube.com/embed/7cdZYQB5ONE', 'https://www.youtube.com/embed/i1gE3nyQnKg', ]; 
      var titles = ['Beethoven - Music, Love and Wine', 'Mozart String Serenade No.13', 'Beethoven Sonata No. 31 in A Flat Major', "Debussy - Children's Corner", ]; 
      var images = ["url('Assets/beethoven.jpg')", "url('Assets/mozart.jpg')", "url('Assets/beethoven.jpg')", "url('Assets/debussy.jpg')", ] 
      var searches = ['beethoven+biography&s=0', 'wolfgang+mozart&s=0', 'beethoven+biography&s=0', 'Claude+Debussy&s=1', ]; 
      //Gets a random index then uses said index to select an option in the array 
      var rand = Math.floor(Math.random() * videos.length); 
      var video = videos[rand]; 
      var title = titles[rand]; 
      var image = images[rand]; 
      var search = searches[rand]; 
      //replaces parts of html with selected option from array 
      document.getElementById("songTitle").innerHTML = title; 
      document.getElementById("img").style.backgroundImage = image; 
      document.getElementById("randomVideo").src = video; 
      return search 
     } 
     var apiKey = "jja10ssv4950uh65"; 
     //I want to do this function and the one abovevwhen the document is loaded 
     $(document).onload(function() { 
      var searchTerm = getRandomVideo(); 
      var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 
      console.log(url); 
      $.getJSON(url, function(data) { 
       $('#output').empty(); 
       $.each(data.response.zone[0].records.article, function(index, value) { 
        $("#output").append("<p>" + value.articleText + "</p>"); 
       }); 
      }); 
     }); 
    }); 
</script> 

Answer 1

.onload не метод JQuery. В .ready() в начале jsdocument должен быть загружен на призыв $.getJSON()

$(document).ready(function() { 
// do stuff 
var apiKey = "jja10ssv4950uh65"; 
var searchTerm = getRandomVideo(); 
var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 
console.log(url); 
$.getJSON(url, function(data) { 
    $('#output').empty(); 
    $.each(data.response.zone[0].records.article, function(index, value) { 
    $("#output").append("<p>" + value.articleText + "</p>"); 
    }); 
    }); 
}) 

Answer 2

Удалите OnLoad часть из из вашего кода JQuery, и он будет работать.

$(document).ready(function() { 
 
function getRandomVideo() { 
 
\t //Arrays for videos, titles, images, and searches 
 
\t var videos = ['https://www.youtube.com/embed/kiTO7c_qeZs', 'https://www.youtube.com/embed/z4Hfv00eqoI', 'https://www.youtube.com/embed/7cdZYQB5ONE', 'https://www.youtube.com/embed/i1gE3nyQnKg', ]; 
 
\t var titles = ['Beethoven - Music, Love and Wine', 'Mozart String Serenade No.13', 'Beethoven Sonata No. 31 in A Flat Major', "Debussy - Children's Corner", ]; 
 
\t var images = ["url('Assets/beethoven.jpg')", "url('Assets/mozart.jpg')", "url('Assets/beethoven.jpg')", "url('Assets/debussy.jpg')", ] 
 
\t var searches = ['beethoven+biography&s=0', 'wolfgang+mozart&s=0', 'beethoven+biography&s=0', 'Claude+Debussy&s=1', ]; 
 
\t //Gets a random index then uses said index to select an option in the array 
 
\t var rand = Math.floor(Math.random() * videos.length); 
 
\t var video = videos[rand]; 
 
\t var title = titles[rand]; 
 
\t alert(title); 
 
\t var image = images[rand]; 
 
\t var search = searches[rand]; 
 
\t //replaces parts of html with selected option from array 
 
\t document.getElementById("songTitle").innerHTML = title; 
 
\t document.getElementById("img").style.backgroundImage = image; 
 
\t document.getElementById("randomVideo").src = video; 
 
\t return search 
 
} 
 
var apiKey = "jja10ssv4950uh65"; 
 
//I want to do this function and the one abovevwhen the document is loaded 
 
var searchTerm = getRandomVideo(); 
 
var url = "http://api.trove.nla.gov.au/result?key=" + apiKey + "&encoding=json&zone=newspaper&sortby=relevance&q=" + searchTerm + "&s=0&n=5&include=articletext,pdf&encoding=json&callback=?"; 
 
console.log(url); 
 
$.getJSON(url, function(data) { 
 
\t $('#output').empty(); 
 
\t $.each(data.response.zone[0].records.article, function(index, value) { 
 
\t \t $("#output").append("<p>" + value.articleText + "</p>"); 
 
\t }); 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="songTitle"></div>

Answer 3

При вызове функции попробовать, как это ... например:

<button onclick="$(function(){getRandomVideo()});">Test</button> 

И пусть

<script type="text/javascript"> 
    function getRandomVideo() { 
      // Your codes.. 
    } 
</script>