Tic Tac Toe 2 players

Hey i have a question about javascript. At the moment I have to program a tic tac toe game. I am already so far that the first player can put his cross in the top left corner. Now I ask my question, how do I make it that after the first player with the symbol X, the second player with the symbol O is on and plays.

The code at the moment:

function erstes() {
  var x = document.getElementById("erstesfeld");
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    document.getElementById("erstesfeld").style.fontSize = "100px";
    document.getElementById("erstesfeld").style.fontFamily = "cursive";
  }
}

.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld" onclick="erstes()">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="zweites()">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="drittes()">Blank</button></div>
        <div><button class="vier">Blank</button></div>
        <div><button class="fünf">Blank</button></div>
        <div><button class="sechs">Blank</button></div>
        <div><button class="sieben">Blank</button></div>
        <div><button class="acht">Blank</button></div>
        <div><button class="neun">Blank</button></div>
    </div>
</body>
</html>

Solution

Summary!

Create a variable to track current player.
Create a another function for zero.
Create a function to handle click event.
In that function check the current player and base on that player call the erstes or zero function.

let currentPlayer = "player1";
function handleClick(box) {
  if(currentPlayer === "player1"){
    erstes(box);
    currentPlayer = "player2";
  }else{
    zero(box);
    currentPlayer = "player1";
  }
}
function erstes(box) {
  var x = box;
  if (x.innerHTML === "Blank")
   {
    x.innerHTML = "X";
    x.style.fontSize = "100px";
    x.style.fontFamily = "cursive";
  }
}
function zero(box) {
  var o = box;
  if (o.innerHTML === "Blank")
   {
    o.innerHTML = "O";
    o.style.fontSize = "100px";
    o.style.fontFamily = "cursive";
  }
}

.Feld{
    display: flex;
    flex-wrap: wrap;
    width: 600px;
    height: 600px;
}

.Feld div{
    width: 200px;
    height: 200px;
    background-color: aqua;
    border-color: black;
}
.eins{
    width: 200px;
    height: 200px;
    border-color: black;
}
.zwei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.drei{
    width: 200px;
    height: 200px;
    border-color: black;
}
.vier{
    width: 200px;
    height: 200px;
    border-color: black;
}

.fünf{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sechs{
    width: 200px;
    height: 200px;
    border-color: black;
}

.sieben{
    width: 200px;
    height: 200px;
    border-color: black;
}

.acht{
    width: 200px;
    height: 200px;
    border-color: black;
}

.neun{
    width: 200px;
    height: 200px;
    border-color: black;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css.css">
    <script src="js.js"></script>
    <title>TTT</title>
</head>
<body>

    <div class="Feld">
        <div><button class="eins" id="erstesfeld" onclick="handleClick(this)">Blank</button> </div>
        <div><button class="zwei" id="zweitesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="drei" id="drittesfeld" onclick="handleClick(this)">Blank</button></div>
        <div><button class="vier" onclick="handleClick(this)">Blank</button></div>
        <div><button class="fünf" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sechs" onclick="handleClick(this)">Blank</button></div>
        <div><button class="sieben" onclick="handleClick(this)">Blank</button></div>
        <div><button class="acht" onclick="handleClick(this)">Blank</button></div>
        <div><button class="neun" onclick="handleClick(this)">Blank</button></div>
    </div>
</body>
</html>