我正在开发一个从API生成问题的琐事应用程序。我希望在单击"获取问题"按钮后，生成的问题是针对所选类别/难度的。现在，当页面加载时，它会在控制台上生成随机问题。我不清楚哪里出了问题？
到目前为止，我的代码是：
const score = document.querySelector('#score');
const output = document.querySelector('#output');
const answerSelect = document.querySelector('#selAnswers');
const btn = document.querySelector('#btn');
const categories = [
'Sports',
'Art',
'Vehicles',
'History'
];
const difficulty = [
'easy',
'medium',
'hard'
];
btn.addEventListener('submit', function(e) {
e.preventDefault();
});
document.addEventListener('DOMContentLoaded', function() {
let categorySelect = document.querySelector('#category');
let difficultySelect = document.querySelector('#difficulty');
let html = '';
for (let item of categories) {
// Appending Strings created using Template literals
html += `<option>${item}</option>`;
}
categorySelect.innerHTML = html;
for (let item of difficulty) {
let opt = document.createElement('option');
// <option> will use its .textContent as value if not explicitly defined
opt.textContent = item;
difficultySelect.append(opt);
}
});
$.ajax ({
url: 'https://opentdb.com/api.php?amount=10',
data: '{}',
type: 'GET',
dataType: 'json',
success: function(data) {
console.log(data.results[0]);
data.items.forEach(function(item){
//console.log(item);
let output = getOutput(item);
//Display Results
result.innerHTML += output;
});
},
error: function(jqXHR, textStatus, ex ){
console.log(`${textStatus}, ${ex}, ${jqXHR.responseText}`);
alert(`${textStatus}, ${ex} ${jqXHR.responseText}`);
}
});
//function
function getQuestion(){
result.innerHTML ='';
btn.innerHTML ='';
let categoryOption = categories.value;
let difficultyLevel = difficulty.value;
}
HTML:
<!doctype html>
<html lang="en">
<head>
<title>Trivia</title>
<link rel='stylesheet' href='css/Trivia.css' >
</head>
<body>
<h1>Trivia</h1>
<div>Score: <span id='score'>Correct 0 Wrong 0</span></div>
<br>
<div>
<label>Select Category:</label>
<select id='category'></select>
<br>
<label>Select Difficulty:</label>
<select id='difficulty'></select>
</div>
<br><br>
<div id='output'></div>
<br>
<div id='selAnswers'></div>
<br>
<button id='btn' type='submit'>Get First Question!</button>
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<script src ='js/Trivia.js'></script>
</body>
</html>
根据文档，您应该将参数类别、难度和类型添加到GET请求中，指定从选择列表中选择的值。您似乎没有将这些参数添加到ajax调用中。
除此之外；类别"；参数不能作为文本类别(看起来像您要做的(传递，而是作为数字索引的类别列表传递。直接从API帮助页面，类似这样的内容：
<option value="9">General Knowledge</option>
<option value="10">Entertainment: Books</option>
<option value="11">Entertainment: Film</option>
<option value="12">Entertainment: Music</option>
<option value="13">Entertainment: Musicals & Theatres</option>
<option value="14">Entertainment: Television</option>
<option value="15">Entertainment: Video Games</option>
<option value="16">Entertainment: Board Games</option>
<option value="17">Science & Nature</option>
<option value="18">Science: Computers</option>
<option value="19">Science: Mathematics</option>
<option value="20">Mythology</option>...
它看起来很容易实现。您的代码只是进行基本调用，没有任何参数。只要将它们添加到查询字符串中，就可以了。