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方法。 js document开头的.ready()应在$.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

从jquery代码中删除onload部分，它将起作用。

$(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];
	alert(title);
	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
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 src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="songTitle"></div>

Answer 3

当你打电话给这个功能试试这样...... E.g：

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

让

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

加载页面后加载功能

3 个答案: