Soccer Player Name App
Enter the team name and player number below to find out the player name:
以下がサッカー選手のチーム名と背番号を入力すると、選手名を教えてくれるアプリのコード例です。フォームで入力されたデータをもとに、選手名を表示します。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Soccer Player Name App</title>
</head>
<body>
<h1>Soccer Player Name App</h1>
<p>Enter the team name and player number below to find out the player name:</p>
<form>
<label for="team">Enter team name:</label>
<input type="text" id="team" name="team"><br><br>
<label for="number">Enter player number:</label>
<input type="text" id="number" name="number"><br><br>
<button type="submit" onclick="getPlayerName()">Get Player Name</button>
</form>
<p id="result"></p>
<script>
function getPlayerName() {
// Get the values entered in the form
var teamName = document.getElementById("team").value;
var playerNumber = document.getElementById("number").value;
// Check if the team name and player number are valid
if (teamName == "" || playerNumber == "" || isNaN(playerNumber)) {
document.getElementById("result").innerHTML = "Please enter a valid team name and player number.";
} else {
// Check the team name and player number
if (teamName.toLowerCase() == "manchester united" && playerNumber == "7") {
// Display the player name
document.getElementById("result").innerHTML = "The player name is Cristiano Ronaldo.";
} else if (teamName.toLowerCase() == "real madrid" && playerNumber == "10") {
// Display the player name
document.getElementById("result").innerHTML = "The player name is Luka Modric.";
} else {
// Display an error message
document.getElementById("result").innerHTML = "Sorry, we couldn't find the player name. Please enter a valid team name and player number.";
}
}
}
</script>
</body>
</html>
```
注意点として、evalや他のサイトへの遷移、リダイレクトを使用せず、入力データの検証を行っていることが挙げられます。また、ジョークを取り入れる場合は、提示された要望に合わせた内容にします。