问题描述
我正在创建一个琐事游戏，从API中提取问题。我想用引导程序来设计游戏风格。游戏是用Java的Jquery创建的HTML表。该表在调用该函数后追加到页面上，但是看起来不像引导设计。引导程序似乎未正确加载？
我尝试在HTML页面的底部添加CDN Bootstrap链接，但是没有运气。我也尝试将HTML从Javascript复制粘贴到HTML页面上，但是样式仍然不正确。我没有关于如何解决此问题的想法。任何帮助表示赞赏！
我想要的表格样式是引导网页上的深色边框：https://getbootstrap.com/docs/4.3/content/tables/#bordered-table
let categories = [];
let catsAndClues = [];
// create Jeopardy Title and Start/Reset button
$("body").append(`
<h1 id="title">JEOPARDY!</h1>
<div id="button-div">
<button id="button" data-startBtn="true">Start!</button>
</div>
<div id="game-board">
</div>`)
async function getCategoryIds() {
// save random number from one to 18000 to randomInt
// randomInt will be used as the "offset" parameter to get a random sequence of categories
let randomInt = Math.floor((Math.random() * 18000) + 1);
let res = await axios.get(`http://jservice.io/api/categories?count=100&offset=${randomInt}`);
// create a loop to iterate until the categories array contains 6 items
for (let i=0;categories.length<6;i++){
// pull random ID number from the 100 categories pulled from API
let i= Math.floor((Math.random() * 100) + 1);
let randomCatId= res.data[i].id;
// if categories array does not include the randomCatId,add it to the categories array
if (!categories.includes(randomCatId)){
categories.push(randomCatId);
}
console.log(categories);
}
}
async function getCategory(catId) {
// retreive clues from API with the category ID parameter
let res = await axios.get(`http://jservice.io/api/clues?category=${catId}`);
// use .map function to return object displaying question,answer,and "showing"
// properties for every item in the data's array
let clueGroup = res.data.map(clue => {
return {
question: clue.question,answer: clue.answer,showing: null,};
})
console.log("clueGroup:",clueGroup);
let clueArray = [];
for (let i=0;clueArray.length<5;i++){
// pull random clue from the clues array and save to variable
let i= Math.floor((Math.random() * clueGroup.length));
let randomClue= clueGroup[i];
// if categories array does not include the randomCatId,add it to the categories array
if (!clueArray.includes(randomClue)){
clueArray.push(randomClue);
}
};
// define obj to show category title and list of all clues within the category
console.log("clueArray: ",clueArray);
console.log(res.data[0].category.title);
return {title: res.data[0].category.title,clues: clueArray};
}
function fillTable() {
$("#game-board").append(
`<table>
<thead>
<tr id="header-row" class="table table-dark">
<th scope="col">${catsAndClues[0].title}</th>
<th scope="col">${catsAndClues[1].title}</th>
<th scope="col">${catsAndClues[2].title}</th>
<th scope="col">${catsAndClues[3].title}</th>
<th scope="col">${catsAndClues[4].title}</th>
<th scope="col">${catsAndClues[5].title}</th>
</tr>
</thead>
<tbody>
<tr>
<th id="${catsAndClues[0].clues[0].question}">?</th>
<th id="${catsAndClues[1].clues[0].question}">?</th>
<th id="${catsAndClues[2].clues[0].question}">?</th>
<th id="${catsAndClues[3].clues[0].question}">?</th>
<th id="${catsAndClues[4].clues[0].question}">?</th>
<th id="${catsAndClues[5].clues[0].question}">?</th>
</tr>
<tr>
<th id="${catsAndClues[0].clues[1].question}">?</th>
<th id="${catsAndClues[1].clues[1].question}">?</th>
<th id="${catsAndClues[2].clues[1].question}">?</th>
<th id="${catsAndClues[3].clues[1].question}">?</th>
<th id="${catsAndClues[4].clues[1].question}">?</th>
<th id="${catsAndClues[5].clues[1].question}">?</th>
</tr>
<tr>
<th id="${catsAndClues[0].clues[2].question}">?</th>
<th id="${catsAndClues[1].clues[2].question}">?</th>
<th id="${catsAndClues[2].clues[2].question}">?</th>
<th id="${catsAndClues[3].clues[2].question}">?</th>
<th id="${catsAndClues[4].clues[2].question}">?</th>
<th id="${catsAndClues[5].clues[2].question}">?</th>
</tr>
<tr>
<th id="${catsAndClues[0].clues[3].question}">?</th>
<th id="${catsAndClues[1].clues[3].question}">?</th>
<th id="${catsAndClues[2].clues[3].question}">?</th>
<th id="${catsAndClues[3].clues[3].question}">?</th>
<th id="${catsAndClues[4].clues[3].question}">?</th>
<th id="${catsAndClues[5].clues[3].question}">?</th>
</tr>
<tr>
<th id="${catsAndClues[0].clues[4].question}">?</th>
<th id="${catsAndClues[1].clues[4].question}">?</th>
<th id="${catsAndClues[2].clues[4].question}">?</th>
<th id="${catsAndClues[3].clues[4].question}">?</th>
<th id="${catsAndClues[4].clues[4].question}">?</th>
<th id="${catsAndClues[5].clues[4].question}">?</th>
</tr>
</tbody>
</table>`);
}
async function setupAndStart() {
await getCategoryIds();
console.log(catsAndClues);
for (let i=0;catsAndClues.length<6;i++){
let tempVar = await getCategory(categories[i]);
catsAndClues[i] = tempVar;
}
console.log(catsAndClues);
fillTable();
}
setupAndStart()/* some colors you may find useful:
#115ff4
#060ce9
#28a200
#8d2ab5
#74119c
*/
body {
background-color: #115ff4;
font-family: Helvetica;
}
#title {
text-align: center;
color: #f2dc56;
text-shadow: 4px 4px black;
font-size: 3em;
}
#button-div{
text-align: center;
}
#button{
padding: 5px 20px 5px 20px;
font-family: Helvetica;
}<!doctype html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport"
content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=copse&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="jeopardy.css">
</head>
<body>
<script src="https://unpkg.com/jquery"></script>
<script src="https://unpkg.com/axios/dist/axios.js"></script>
<script src="https://unpkg.com/lodash"></script>
<script src="jeopardy.js"></script>
</body>
</html>解决方法
将类添加到表标签“ table table-bordered table-dark”