how to make the proper if-statement for memory game

I am doing a memory game for a school project and i am having a hard time with the javascript... I need to make an if statement that compares the cards and then if they match up, then you get a score and if not then they turn around again. and i have no idea how to do it. (the console log's are just to see if the code was working)

vanilla javascript only :)

codepen:

https://codepen.io/anna100d/pen/wvgQLdW

//Function for the dropdown content
function dropdownTips() {
    document.getElementById("mydropdown").classList.toggle("show");
}


window.addEventListener("click", function(event) {
if (!event.target.matches('.dropbtn')) {

        var dropdowns = document.getElementsByClassName("dropdowncontent");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
             if (openDropdown.classList.contains('show')) {
             openDropdown.classList.remove('show');
            }
        }
    }
});

//the game
let score = 0;

const cards = document.getElementsByClassName("card");


for (let i = 0; i < cards.length; i++) {
    cards[i].addEventListener("click", function() { 
        cards[i].classList.add("open"); 
        console.log(this.id)
        
        if (document.getElementById(this.id).getAttribute('type') === document.getElementById(this.id).getAttribute('type')  ) {
            console.log("hello");
        } else {
            console.log("byebye");
        }
        });
}

* {
  margin: 0;
  padding: 0;
  font-family: 'Lato', sans-serif;
}

header {
  background-color:#00005e;
  height: 60px;
  position: relative;
}

header h1 {
  color: white;
  position: absolute;
  top: 17%;
  left: 39%;
  right: 40%;
  width: 355px;
}

/*The 'tips?' button and the drop down content*/
header button {
display: inline-flex;
position:absolute;
align-items: center;
right: 2%;
top: 15%;
bottom: 15%;
padding: 10px 20px;
font-size: 20px;
background-color:white;
color: #00005e;
border-radius: 10px;
cursor: pointer;
border-color: transparent;
}

header button:hover {
opacity: 80%;
}


.dropdowncontent {
display: none;
position: absolute;
right: 0%;
top: 100%;
background-color:#00005e;
min-width: 160px;
max-width: 400px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
border-bottom-left-radius: 20px;
z-index: 100;

}

.dropdowncontent li {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
}

.advise{
font-size: 19px;
}

.passwordtips {
font-size: 30px;
left: 20%;
}

.show {
display:block;
}

/*The link in the dropdowncontent*/
a {
text-decoration: underline;
color: white;
}

a:hover {
cursor: pointer;
}

/*The score counter*/
.score {
  color: #01016e;
  display: flex;
  justify-content: center;
  margin: 20px;
}

/*The game section*/
section {
  max-width: 1300px;
  height: 550px;
  display: flex;
  justify-content: space-around;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 7px;
  border-color: #00005e;
  border-style: solid;
  border-width: 5px;
  position: relative;
}

/*The sections content*/
.wrapper {
width: 100%;
height: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: 185px;
margin-top: 7px;
}

.card{
background-color: #01016e;
color: white;
margin: 10px 10px;
height: 150px;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
font-size: 0;
border-radius: 5px;
}

.card h2{
  padding: 2px;
  transform: scale(-1,1);
}

.card:hover {
cursor: pointer;
}

.open{
animation: flip .5s;
animation-fill-mode: forwards;
transform-style: preserve-3d;
}

@keyframes flip {
from { 
  background: #00005e;
  font-size: 0;
}
to{
  background: rgb(20, 73, 185);
  font-size:17px;
  transform: rotateY( 180deg );
}
}

/* .welcome {
display: flex;
justify-content: center;
text-align: center;
color: #3c3b6e;
margin-top: 100px;
font-size: 50px;
clear: both;
position: absolute;
}

.startbutton {
display: flex;
justify-content: center;
align-self: center;
margin-top: 100px;
position: absolute;
background-color: #00005e;
color: #e8ebf1;
padding: 10px;
font-size: 30px;
border-radius: 4px;
z-index: 0;
border-color: transparent;
}

.startbutton:hover{
cursor: pointer;
background-color: #3c3b6e;
}
*/

/*The game*/


/*The 'DID YOU KNOW' over the ticker*/
.facts {
display: flex;
justify-content: space-around;
margin-top: 30px;
font-size: 20px;
color: #00005e;
}

/*The facts ticker*/
.tcontainer {
max-width: 1200px;
margin-top: 20px;
overflow: hidden;
margin-left: auto;
margin-right: auto;
border-radius: 5px;
z-index: 1000;
}

.ticker-wrap {
width: 100%;
padding-left: 100%; 
background-color: #00005e;
}

@keyframes ticker {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
.ticker-move {
 display: inline-block;
white-space: nowrap;
padding-right: 100%;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: ticker;
animation-duration: 55s;
}
.ticker-move:hover{
animation-play-state: paused; 
}

.ticker-item{
display: inline-block; 
padding-top: 5px;
padding-bottom: 2px;
padding-right: 3em;
color: white;
min-height: 40px;
font-size: 25px;
}


/*The pause button for the ticker*/
.pause {
display: flex;
justify-content: center;
margin-top: 10px;
}

.pausebutton {
padding: 5px;
border-radius: 3px;
background-color: #00005e;
color: white;
border-style: none;
cursor: pointer;
}

.pausebutton:hover {
background-color: #3c3b6e;
}

<!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/style.css">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
    <title>The Password Game</title>
</head>
<body>
    <header>
        <h1>THE PASSWORD GAME</h1>

        <div class="dropdown">
            <button onclick="dropdownTips()" class="dropbtn">TIPS?</button>
            <div class="dropdowncontent" id="mydropdown" >
                <ul>
                    <li class="passwordtips">Tips for making strong passwords: </li>
                    <li class="advise">1. Use 16 characters or more (use both uppercase and lowercase letters, number and symbols.)</li>
                    <li class="advise">2. Never use the same password twice.</li>
                    <li class="advise">3. Use a password manager.</li>
                    <li class="advise">4. Don't write your passwords down on paper.</li>
                    <li class="advise">5. Don't share your passwords with others.</li>
                    <li class="advise">6. Change your password after a breach.</li>
                    <li class="advise">7. Sign up for data breach notifications. (like <a href="https://haveibeenpwned.com/" target="_blank">haveibeenpwned.com</a>).</li>
                    <li class="advise">8. Check your accounts regularly for any suspicious activity. </li>
                </ul>
            </div>
        </div>
    </header>

    <div class="score"><h2></h2></div>

    <section>
        <div class="wrapper" id="card-deck">
            <div id="cardOne" class="card"  type="1"><h2>What information should you NEVER use in a password?</h2></div>
            <div id="answerSix" class="card"  type="6"><h2>1 log in</h2></div>
            <div id="cardThree" class="card"  type="3"><h2>When should you ALWAYS change your password?</h2></div>
            <div id="anserFive" class="card"  type="5"><h2>suspicious activity</h2></div>
            <div id="cardTwo" class="card"  type="2"><h2>Who is it okay to tell your password to?</h2></div>
            <div id="answerFour" class="card" type="4"><h2>16</h2></div>
            <div id="answerThree" class="card" type="3"><h2>After a data breach</h2></div>
            <div id="answerTwo" class="card" type="2"><h2>No one</h2></div>
            <div id="CardSix" class="card" type="6"><h2>For how many log ins is it okay to use the same password?</h2></div>
            <div id="cardFour" class="card" type="4"><h2>How many characters should you AT LEAST use in a password?</h2></div>
            <div id="answerOne" class="card" type="1"><h2>Name and Birthday</h2></div>
            <div id="cardFive" class="card" type="5"><h2>What should you regularly look for in your accounts?</h2></div>
        </div>
    </section>

    <div class="facts">
        <h2>DID YOU KNOW?</h2>
    </div>

    <div class="tcontainer"><div class="ticker-wrap"><div class="ticker-move">
        <div class="ticker-item">There is a hacker attack every 39 seconds.</div>
        <div class="ticker-item">90% of passwords can be cracked in less than 6 hours.</div>
        <div class="ticker-item">80% of hacking related breaches are linked to insufficient passwords.</div>
        <div class="ticker-item">59% use their name or birthday in their password.</div>
        <div class="ticker-item">6.850.000 passwords are getting hacked each day.</div>
      </div></div></div>

    <div class="pause">
        <p>Hold your mouse over to pause</p>
    </div>
    <script src="javascript/javascript.js" ></script>
</body>
</html>