F1车手猜测游戏：用户输入后动态修改Placeholder的实现

算力阿峰

2026-7-25

实现猜车手游戏的动态Placeholder更新

我正在制作一款根据车手效力过的车队猜测车手的游戏，需求如下：

用户能看到已猜测次数和总猜测次数，总次数等于车手效力过的车队数量
首次猜测时输入框Placeholder为“Guess 1 of X”（X为总次数）
猜对则游戏结束，展示该车手的全部职业生涯，然后重置游戏
猜错则更新Placeholder为“Guess 2 of X”，以此类推；若次数用完仍未猜对，同样展示全部职业生涯并重置游戏

以下是修改后的完整代码：

修改后的HTML

<!DOCTYPE html>
<html>
<link rel="shortcut icon" href="/assets/favicon.ico">
<link rel="stylesheet" href="guess_driver_path.css">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

<head>
    <title>formula1.pro</title>
    <style>
            .home {
      color: white;
      text-decoration: none;
    }
        body {
           background-color: #adadad;
        }

        .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;
        }

        #guess_count {
            margin-bottom: 10px;
        }

        header h1 {
        margin: 0;
    }

    header button {
        background-color: white;
        color: #000;
        border: none;
        padding: 10px 10px;
        border-radius: 5px;
        cursor: pointer;
    }
    header button:hover {
        background-color: #f5f5f5
    }
</style>
</head>
<body>
    <header>
        <div class="wrapper">
            <h1>
              <a style="justify-content: left; font-size: 2em;" class="home" href="index.html">
              &nbsp;  &nbsp; Formula1
              </a>
            </h1>
            <div class="menu">
              <div class="nav-menu">
              <a href="higher_or_lower.html" class="menu-link">Higher or Lower</a>
              <a href="guess_driver_path.html" class="menu-link">Guess Drivers Path</a>
              <a href="rankings.html" class="menu-link">Standings</a>
              <a href="chat.html" class="menu-link">Chat</a>
              </div>
              <img src="rotate.png" class="car" />
              <div class="follow">
            &equiv;
              </div>
            </div>
            </div>
    </header>
    <div class="container">
        <h1 class="title">Guess the driver's career</h1>
        <form id="guess_driver_path">
            <div class="h3">Drivers Career:</div>
            <div class="career">
            </div>
            <div class="gues">
                <label style="font-size: 2em;" for="guess">Guess the driver:</label>
                <textarea id="guess" placeholder="" name="guess" rows="1" required></textarea>
            </div>
        </form>
    </div>
        <script src="guess_driver_path.js"></script>
        <div class="contact">
            <h1><a id="contact" href="mailto:@gmail.com">Contact</a></h1>
            &nbsp;
            &nbsp;
            &nbsp;
            <h1><a id="privacy" href="...">Privacy</a></h1>
          </div>
</body>
</html>

修改后的JavaScript

// 定义车手列表及职业生涯数据
const drivers = [
    {
      name: "Sebastian Vettel",
      aliases: ["sebastian","vettel"],
      career: [
        { team: "Red Bull", years: "2009-2014" },
        { team: "Ferrari", years: "2015-2020" },
        { team: "Aston Martin", years: "2021-2022" }
      ],
      maxGuesses: 3
    },
    {
      name: "Lewis Hamilton",
      aliases: ["lewis","hamilton"],
      career: [
        { team: "McLaren", years: "2007-2012" },
        { team: "Mercedes", years: "2013-" }
      ],
      maxGuesses: 2
    },
    {
      name: "Max Verstappen",
      aliases: ["max","verstappen"],
      career: [
        { team: "Toro Rosso", years: "2015" },
        { team: "Red Bull", years: "2016-" }
      ],
      maxGuesses: 2
    },
    {
        name: "Michael Schumacher",
        aliases: ["michael","schumacher"],
        career: [
          { team: "Jordan", years: "1991" },
          { team: "Benetton", years: "1991-1995" },
          { team: "Ferrari", years: "1996-2006" },
          { team: "Mercedes", years: "2010-2012" }
        ],
        maxGuesses: 4
    },
    // 可在此添加更多车手数据
  ];
  
// 获取页面元素
const form = document.querySelector("#guess_driver_path");
const guessInput = form.querySelector("#guess");
const careerDiv = document.querySelector(".career");

// 游戏状态变量
let currentDriverIndex = Math.floor(Math.random() * drivers.length);
let currentDriver = drivers[currentDriverIndex];
let currentTeamIndex = 0;
let currentGuessCount = 1;

// 初始化游戏状态
function initGame() {
    // 重置所有状态
    currentDriverIndex = Math.floor(Math.random() * drivers.length);
    currentDriver = drivers[currentDriverIndex];
    currentTeamIndex = 0;
    currentGuessCount = 1;
    
    // 清空职业生涯展示区并显示第一个车队
    careerDiv.innerHTML = "";
    careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
    // 更新输入框占位符
    updatePlaceholder();
}

// 更新输入框的placeholder文本
function updatePlaceholder() {
    guessInput.placeholder = `Guess ${currentGuessCount} of ${currentDriver.maxGuesses}`;
}

// 展示车手完整职业生涯
function showFullCareer() {
    careerDiv.innerHTML = "";
    currentDriver.career.forEach(stint => {
        careerDiv.innerHTML += `<div>${stint.team} ${stint.years}</div>`;
    });
}

// 处理表单提交事件
form.addEventListener("submit", (event) => {
  event.preventDefault();

  const guess = guessInput.value.trim().toLowerCase();
  guessInput.value = "";

  // 验证猜测是否匹配车手名字或别名
  const isCorrect = guess === currentDriver.name.toLowerCase() || currentDriver.aliases.includes(guess);

  if (isCorrect) {
    alert(`That's correct! The driver is ${currentDriver.name}`);
    showFullCareer();
    // 延迟2秒后重置游戏，让用户查看完整职业生涯
    setTimeout(initGame, 2000);
  } else {
    // 检查是否还有剩余猜测次数
    if (currentGuessCount < currentDriver.maxGuesses) {
        alert(`Sorry, that's not correct. Keep guessing!`);
        currentGuessCount++;
        currentTeamIndex++;
        // 显示下一个车队信息
        careerDiv.innerHTML += `<div>${currentDriver.career[currentTeamIndex].team} ${currentDriver.career[currentTeamIndex].years}</div>`;
        updatePlaceholder();
    } else {
        // 次数用尽，游戏结束
        alert(`Game over! The driver was ${currentDriver.name}`);
        showFullCareer();
        setTimeout(initGame, 2000);
    }
  }
});

// 监听回车事件提交表单
guessInput.addEventListener("keyup", event => {
  if (event.keyCode === 13) {
    event.preventDefault();
    form.dispatchEvent(new Event("submit"));
  }
});

// 页面加载完成后初始化游戏
initGame();

关键改动说明

新增currentGuessCount变量跟踪当前猜测次数，initGame函数统一处理游戏初始化逻辑
添加updatePlaceholder函数专门负责更新输入框的占位符文本，确保状态变化时同步更新
完善猜测验证逻辑，支持匹配车手的别名
新增showFullCareer函数，用于在猜对或次数用尽时展示车手完整职业生涯
处理了次数用尽的边界情况，游戏结束后自动重置
页面加载时自动初始化游戏，无需手动触发

内容的提问来源于stack exchange，提问作者Öli

F1车手猜测游戏：用户输入后动态修改Placeholder的实现

修改后的HTML #

修改后的JavaScript #

关键改动说明 #

修改后的HTML

修改后的JavaScript

关键改动说明