如何控制何时显示元素?

Question

我想做一个关于f1车手职业生涯的小测验游戏。用户将首先看到车手所在的车队和周期，然后用户根据车队和周期猜测车手可能是谁。如果他猜对了，那么所有球队(职业生涯)都会显示出来，游戏结束(用户获胜)。但是，如果用户猜错了，那么下一个团队就会显示车手的职业生涯等等。如果玩家猜不出车手的最后一支队伍，游戏结束(玩家输)。它应该在输入容器上显示"Guess x of x"，这样用户就可以看到还剩下多少次猜测。用户可以用键盘上的"输入"键代替"提交"键。

// Define the list of drivers with their respective career paths
const drivers = [{
name: "Sebastian Vettel",
career: [{
team: "Red Bull",
years: "2009-2014"
},
{
team: "Ferrari",
years: "2015-2020"
},
{
team: "Aston Martin",
years: "2021-2022"
}
]
},
{
name: "Lewis Hamilton",
career: [{
team: "McLaren",
years: "2007-2012"
},
{
team: "Mercedes",
years: "2013-"
}
]
},
{
name: "Max Verstappen",
career: [{
team: "Toro Rosso",
years: "2015"
},
{
team: "Red Bull",
years: "2016-"
}
]
},
{
name: "Michael Schumacher",
career: [{
team: "Jordan",
years: "1991"
},
{
team: "Benetton",
years: "1991-1995"
},
{
team: "Ferrari",
years: "1996-2006"
},
{
team: "Mercedes",
years: "2010-2012"
}
]
},
{
name: "Alain Prost",
career: [{
team: "McLaren",
years: "1980"
},
{
team: "Renault",
years: "1981-1983"
},
{
team: "McLaren",
years: "1984-1989"
},
{
team: "Ferrari",
years: "1990-1991"
},
{
team: "Williams",
years: "1993"
}
]
},
{
name: "Pierre Gasly",
career: [{
team: "Torro Rosso",
years: "2017-2018"
},
{
team: "Red Bull",
years: "2019"
},
{
team: "Toro Rosso",
years: "2019"
},
{
team: "Alphatauri",
years: "2020-2022"
},
{
team: "Alpine",
years: "2023-"
}
]
},
{
name: "Mikka Hakkinen",
career: [{
team: "Lotus",
years: "1991-1992"
},
{
team: "McLaren",
years: "1993-2001"
},
]
},
{
name: "Nico Hulkenberg",
career: [{
team: "Williams",
years: "2010"
},
{
team: "Force India",
years: "2011-2012"
},
{
team: "Sauber",
years: "2013"
},
{
team: "Force India",
years: "2014-2016"
},
{
team: "Renault",
years: "2017-2019"
},
{
team: "Racing Point",
years: "2020"
},
{
team: "Aston Martin",
years: "2021-2022"
},
{
team: "Haas",
years: "2023-"
},
]
},
{
name: "Robert Kubica",
career: [{
team: "BMW Sauber",
years: "2006-2009"
},
{
team: "Renault",
years: "2010-2011"
},
{
team: "Williams",
years: "2018-2019"
},
{
team: "Alfa Romeo",
years: "2020-2022"
},
]
},
{
name: "Niki Lauda",
career: [{
team: "Ford Cosworth",
years: "1971-1972"
},
{
team: "BRM",
years: "1973"
},
{
team: "Ferrari",
years: "1974-1977"
},
{
team: "Alfa Romeo",
years: "1978-79"
},
{
team: "Ford Cosworth",
years: "1982-1983"
},
{
team: "McLaren",
years: "1983-1985"
}
]
},
{
name: "Charles Leclerc",
career: [{
team: "Sauber",
years: "2018"
},
{
team: "Ferrari",
years: "2019-"
},
]
},
{
name: "Kevin Magnussen",
career: [{
team: "McLaren",
years: "2014-2015"
},
{
team: "Renault",
years: "2016"
},
{
team: "Haas",
years: "2017-2020"
},
{
team: "Haas",
years: "2022-"
},
]
},
{
name: "Nigel Mansell",
career: [{
team: "Lotus",
years: "1980-1984"
},
{
team: "Williams",
years: "1985-1988"
},
{
team: "Ferrari",
years: "1989-1990"
},
{
team: "Williams",
years: "1991-1992"
},
{
team: "Williams",
years: "1994"
},
{
team: "McLaren",
years: "1995"
}
]
},
{
name: "Esteban Ocon",
career: [{
team: "Manor",
years: "2016"
},
{
team: "Force India",
years: "2017-2018"
},
{
team: "Mercedes",
years: "2019"
},
{
team: "Renault",
years: "2020"
},
{
team: "Alpine",
years: "2021-"
}
]
},
{
name: "Sergio Perez",
career: [{
team: "Sauber",
years: "2011-2012"
},
{
team: "McLaren",
years: "2013"
},
{
team: "Force India",
years: "2014-2018"
},
{
team: "Racing Point",
years: "2018-2020"
},
{
team: "Red Bull",
years: "2021-"
}
]
},
{
name: "Kimi Raikkonen",
career: [{
team: "Sauber",
years: "2001"
},
{
team: "McLaren",
years: "2002-2006"
},
{
team: "Ferrari",
years: "2007-2009"
},
{
team: "Lotus",
years: "2012-2013"
},
{
team: "Ferrari",
years: "2014-2018"
},
{
team: "Alfa Romeo",
years: "2019-2021"
},
]
},
{
name: "Nico Rosberg",
career: [{
team: "Williams",
years: "2005-2009"
},
{
team: "Mercedes",
years: "2010-2016"
},
]
},
{
name: "Carlos Sainz",
career: [{
team: "Toro Rosso",
years: "2015-2017"
},
{
team: "Renault",
years: "2017-2018"
},
{
team: "McLaren",
years: "2019-2020"
},
{
team: "Ferrari",
years: "2021-"
},
]
},
{
name: "Ayrton Senna",
career: [{
team: "Toleman",
years: "1984"
},
{
team: "Lotus",
years: "1985-1987"
},
{
team: "McLaren",
years: "1988-1993"
},
{
team: "Williams",
years: "1994"
},
]
},
{
name: "Lance Stroll",
career: [{
team: "Williams",
years: "2017-2018"
},
{
team: "Racing Point",
years: "2019-2020"
},
{
team: "Aston Martin",
years: "2021-"
},
]
},
{
name: "Valtteri Bottas",
career: [{
team: "Williams",
years: "2013-2016"
},
{
team: "Mercedes",
years: "2017-2021"
},
{
team: "Alfa Romeo",
years: "2022-"
},
]
},
{
name: "Alexander Albon",
career: [{
team: "Toro Rosso",
years: "2019"
},
{
team: "Red Bull",
years: "2019-2021"
},
{
team: "Williams",
years: "2022-"
},
]
},
{
name: "Lando Norris",
career: [{
team: "McLaren",
years: "2019-"
}, ]
},
{
name: "Jenson Button",
career: [{
team: "Williams",
years: "2000"
},
{
team: "Benetton",
years: "2001"
},
{
team: "Renault",
years: "2002"
},
{
team: "Bar",
years: "2003-2005"
},
{
team: "Honda",
years: "2006-2008"
},
{
team: "Brawn GP",
years: "2009"
},
{
team: "McLaren",
years: "2010-2017"
},
]
},
];
// Get the elements from the HTML document
const form = document.querySelector("#guess_driver_path");
const guessInput = form.querySelector("#guess");
// Generate a random driver for the user to guess
let currentDriverIndex = Math.floor(Math.random() * drivers.length);
let currentDriver = drivers[currentDriverIndex];
// Update the HTML document with the current driver's career path
const careerList = document.createElement("ul");
currentDriver.career.forEach(career => {
const careerItem = document.createElement("li");
careerItem.textContent = `${career.team} (${career.years})`;
careerList.appendChild(careerItem);
});
form.querySelector(".career").appendChild(careerList);
// Handle the user's guess
form.addEventListener("submit", event => {
event.preventDefault();
const guess = guessInput.value.trim().toLowerCase();
const fullName = currentDriver.name.split(" ");
const firstName = fullName[0].toLowerCase();
const lastName = fullName[1].toLowerCase();
if (guess === firstName || guess === lastName) {
alert(`That's correct! The driver is ${currentDriver.name}`);
} else {
alert(`Sorry, that's not correct. Keep guessing!`);
}
// Reset the form and generate a new driver for the user to guess
form.reset();
currentDriverIndex = Math.floor(Math.random() * drivers.length);
currentDriver = drivers[currentDriverIndex];
// Remove the previous driver's career path and update the HTML document with the new one
careerList.remove();
careerList.innerHTML = "";
currentDriver.career.forEach(career => {
const careerItem = document.createElement("li");
careerItem.textContent = `${career.team} (${career.years})`;
careerList.appendChild(careerItem);
});
form.querySelector(".career").appendChild(careerList);
});

.home {
color: white;
/* Change the color to black */
text-decoration: none;
/* Remove the underline */
}

/*body {
background-image: url("/Users/kristjanjakobasgrimsson/Desktop/F1/templates/static/background.png");
}*/
.container {
margin: 50px auto;
max-width: 800px;
padding: 100px;
background-color: #f2f2f2;
border-radius: 10px;
}
.career {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
}
.guess[type="text"],
textarea {
width: 100%;
padding: 15px;
border: 1px solid #ccc;
border-radius: 5px;
resize: none;
}
.guess {
margin-top: 20px;
}
.guess {
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 10px;
}

<body>
<header>
<h1><a class="home" href="home.html">Formula1</a></h1>
</header>
<div class="container">
<h1>Guess the drivers career</h1>
<form id="guess_driver_path">
<div class="career">
Drivers Career
</div>
<div class="gues">
<label for="guess">Guess the driver:</label>
<textarea id="guess" name="guess" rows="1" required></textarea>
</div>
<button id="submit">Submit</button>
</form>
</div>
</body>

Answer 1

粘贴如下所示的JS代码． 当有人猜测正确的驱动程序，然后有一个函数是displayDriverCareer调用。这个函数定义是空的，因为我把它留给你了。除此之外，你可以试试它的工作原理是毫无疑问的。我使用计数器跟踪错误的尝试。

// Define the list of drivers with their respective career paths
const drivers = [{
name: "Sebastian Vettel",
career: [{
team: "Red Bull",
years: "2009-2014"
},
{
team: "Ferrari",
years: "2015-2020"
},
{
team: "Aston Martin",
years: "2021-2022"
}
]
},
{
name: "Lewis Hamilton",
career: [{
team: "McLaren",
years: "2007-2012"
},
{
team: "Mercedes",
years: "2013-"
}
]
},
{
name: "Max Verstappen",
career: [{
team: "Toro Rosso",
years: "2015"
},
{
team: "Red Bull",
years: "2016-"
}
]
},
{
name: "Michael Schumacher",
career: [{
team: "Jordan",
years: "1991"
},
{
team: "Benetton",
years: "1991-1995"
},
{
team: "Ferrari",
years: "1996-2006"
},
{
team: "Mercedes",
years: "2010-2012"
}
]
},
{
name: "Alain Prost",
career: [{
team: "McLaren",
years: "1980"
},
{
team: "Renault",
years: "1981-1983"
},
{
team: "McLaren",
years: "1984-1989"
},
{
team: "Ferrari",
years: "1990-1991"
},
{
team: "Williams",
years: "1993"
}
]
},
{
name: "Pierre Gasly",
career: [{
team: "Torro Rosso",
years: "2017-2018"
},
{
team: "Red Bull",
years: "2019"
},
{
team: "Toro Rosso",
years: "2019"
},
{
team: "Alphatauri",
years: "2020-2022"
},
{
team: "Alpine",
years: "2023-"
}
]
},
{
name: "Mikka Hakkinen",
career: [{
team: "Lotus",
years: "1991-1992"
},
{
team: "McLaren",
years: "1993-2001"
},
]
},
{
name: "Nico Hulkenberg",
career: [{
team: "Williams",
years: "2010"
},
{
team: "Force India",
years: "2011-2012"
},
{
team: "Sauber",
years: "2013"
},
{
team: "Force India",
years: "2014-2016"
},
{
team: "Renault",
years: "2017-2019"
},
{
team: "Racing Point",
years: "2020"
},
{
team: "Aston Martin",
years: "2021-2022"
},
{
team: "Haas",
years: "2023-"
},
]
},
{
name: "Robert Kubica",
career: [{
team: "BMW Sauber",
years: "2006-2009"
},
{
team: "Renault",
years: "2010-2011"
},
{
team: "Williams",
years: "2018-2019"
},
{
team: "Alfa Romeo",
years: "2020-2022"
},
]
},
{
name: "Niki Lauda",
career: [{
team: "Ford Cosworth",
years: "1971-1972"
},
{
team: "BRM",
years: "1973"
},
{
team: "Ferrari",
years: "1974-1977"
},
{
team: "Alfa Romeo",
years: "1978-79"
},
{
team: "Ford Cosworth",
years: "1982-1983"
},
{
team: "McLaren",
years: "1983-1985"
}
]
},
{
name: "Charles Leclerc",
career: [{
team: "Sauber",
years: "2018"
},
{
team: "Ferrari",
years: "2019-"
},
]
},
{
name: "Kevin Magnussen",
career: [{
team: "McLaren",
years: "2014-2015"
},
{
team: "Renault",
years: "2016"
},
{
team: "Haas",
years: "2017-2020"
},
{
team: "Haas",
years: "2022-"
},
]
},
{
name: "Nigel Mansell",
career: [{
team: "Lotus",
years: "1980-1984"
},
{
team: "Williams",
years: "1985-1988"
},
{
team: "Ferrari",
years: "1989-1990"
},
{
team: "Williams",
years: "1991-1992"
},
{
team: "Williams",
years: "1994"
},
{
team: "McLaren",
years: "1995"
}
]
},
{
name: "Esteban Ocon",
career: [{
team: "Manor",
years: "2016"
},
{
team: "Force India",
years: "2017-2018"
},
{
team: "Mercedes",
years: "2019"
},
{
team: "Renault",
years: "2020"
},
{
team: "Alpine",
years: "2021-"
}
]
},
{
name: "Sergio Perez",
career: [{
team: "Sauber",
years: "2011-2012"
},
{
team: "McLaren",
years: "2013"
},
{
team: "Force India",
years: "2014-2018"
},
{
team: "Racing Point",
years: "2018-2020"
},
{
team: "Red Bull",
years: "2021-"
}
]
},
{
name: "Kimi Raikkonen",
career: [{
team: "Sauber",
years: "2001"
},
{
team: "McLaren",
years: "2002-2006"
},
{
team: "Ferrari",
years: "2007-2009"
},
{
team: "Lotus",
years: "2012-2013"
},
{
team: "Ferrari",
years: "2014-2018"
},
{
team: "Alfa Romeo",
years: "2019-2021"
},
]
},
{
name: "Nico Rosberg",
career: [{
team: "Williams",
years: "2005-2009"
},
{
team: "Mercedes",
years: "2010-2016"
},
]
},
{
name: "Carlos Sainz",
career: [{
team: "Toro Rosso",
years: "2015-2017"
},
{
team: "Renault",
years: "2017-2018"
},
{
team: "McLaren",
years: "2019-2020"
},
{
team: "Ferrari",
years: "2021-"
},
]
},
{
name: "Ayrton Senna",
career: [{
team: "Toleman",
years: "1984"
},
{
team: "Lotus",
years: "1985-1987"
},
{
team: "McLaren",
years: "1988-1993"
},
{
team: "Williams",
years: "1994"
},
]
},
{
name: "Lance Stroll",
career: [{
team: "Williams",
years: "2017-2018"
},
{
team: "Racing Point",
years: "2019-2020"
},
{
team: "Aston Martin",
years: "2021-"
},
]
},
{
name: "Valtteri Bottas",
career: [{
team: "Williams",
years: "2013-2016"
},
{
team: "Mercedes",
years: "2017-2021"
},
{
team: "Alfa Romeo",
years: "2022-"
},
]
},
{
name: "Alexander Albon",
career: [{
team: "Toro Rosso",
years: "2019"
},
{
team: "Red Bull",
years: "2019-2021"
},
{
team: "Williams",
years: "2022-"
},
]
},
{
name: "Lando Norris",
career: [{
team: "McLaren",
years: "2019-"
}, ]
},
{
name: "Jenson Button",
career: [{
team: "Williams",
years: "2000"
},
{
team: "Benetton",
years: "2001"
},
{
team: "Renault",
years: "2002"
},
{
team: "Bar",
years: "2003-2005"
},
{
team: "Honda",
years: "2006-2008"
},
{
team: "Brawn GP",
years: "2009"
},
{
team: "McLaren",
years: "2010-2017"
},
]
},
];

// Get the elements from the HTML document
const form = document.querySelector("#guess_driver_path");
const guessInput = form.querySelector("#guess");
let counter =3; 
// Generate a random driver for the user to guess
let currentDriverIndex = Math.floor(Math.random() * drivers.length);
let currentDriver = drivers[currentDriverIndex];
// Update the HTML document with the current driver's career path
const careerList = document.createElement("ul");
currentDriver.career.forEach(career => {
const careerItem = document.createElement("li");
careerItem.textContent = `${career.team} (${career.years})`;
careerList.appendChild(careerItem);
});
form.querySelector(".career").appendChild(careerList);
// Handle the user's guess

// function to guess again or restart the game
const guessAgain =()=>{
form.reset();
currentDriverIndex = Math.floor(Math.random() * drivers.length);
currentDriver = drivers[currentDriverIndex];

// Remove the previous driver's career path and update the HTML document with the new one
careerList.remove();
careerList.innerHTML = "";
currentDriver.career.forEach(career => {
const careerItem = document.createElement("li");
careerItem.textContent = `${career.team} (${career.years})`;
careerList.appendChild(careerItem);
});
form.querySelector(".career").appendChild(careerList);
}
//display the driver's career function
const displayDriverCareer = (currentDriver) => {
// show your driver data on screen and give a reset button.
}
form.addEventListener("submit", event => {
event.preventDefault();
const guess = guessInput.value.trim().toLowerCase();
const fullName = currentDriver.name.split(" ");
const firstName = fullName[0].toLowerCase();
const lastName = fullName[1].toLowerCase();
if (guess === firstName || guess === lastName) {
alert(`That's correct! The driver is ${currentDriver.name}`);
counter=3;
displayDriverCareer(currentDriver);
} else {
counter--;
if(counter>0){
alert(`Sorry, that's not correct. ${counter} guess left!`);
}
if(counter === 0){
counter=3;
alert("Game Over! click ok to restart the game");
}
guessAgain();
}

// Reset the form and generate a new driver for the user to guess
});