A resposta sugerida inda não foi vista gostaria de saber se está tudo certo. O formulário captura o Nome do piloto e a equipe que participa. HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<header>
</header>
<form>
<h1 id="titulo">Monte a sua equipe</h1>
<span>Piloto:</span><br>
<select name="piloto" id="piloto"><br>
<option value="Ham">Lewis Hamilton</option>
<option value="Alb">Alexsander Albon</option>
<option value="Rus">George Russel</option>
<option value="Tso">Yuki Tsunoda</option>
</select>
<br><br>
<span>Equipe:</span><br>
<select name="equipe" id="equipe">
<option value="- Ferari">Ferrari</option>
<option value="- Williams">Williams</option>
<option value="- Mercedes">Mercedes</option>
<option value="- RB CASH">RB CASH</option>
</select>
<br>
<button onclick="adicionar()" type = "button" class="button"> Console </button>
<main>
JS
let piloto =[];
let equipe =[];
function adicionar(){
var nomePiloto = document.getElementById("piloto").value;
var nomeEquipe = document.getElementById("equipe").value;
var apresentacao = nomePiloto.concat(nomeEquipe);
console.log(`${nomePiloto} ${nomeEquipe}`);
document.getElementById("titulo").textContent = apresentacao;
}
CSS
header {
text-align: center;
font-size: 30px;
color: #279EFF;
}
main, html {
margin: 0;
padding: 0;
height: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: #0C356A;
color:white;
}
.container {
text-align: center;
color: #279EFF;
}
.button {
padding: 10px 20px;
margin: 10px;
font-size: 24px;
border: none;
background-color: #3498db;
cursor: pointer;
border-radius: 5px;
}
.button:hover {
background-color: #2980b9;
}
