ma fenêtre contextuelle devrait s'afficher lorsque le score = 6, mais je ne peux pas le faire fonctionner

vous avez ce code qui ne s'exécute pas lorsque le score est incrémenté

popup = function() {
      if (score === 6) {
          popup.style.display ="block";
          console.log("hello");
      }
  }

j'ai donc créé une fonction pour vérifier le score comme ça

let popup = document.querySelector("#popup");
function showPopup() {
      if (score === 6) {
          popup.style.display ="block";
          console.log("hello");
      }
  }

Et appelez la showPopupfonction lorsque le score est ajouté comme ceci

if (card.dataset.type === cardToMatch.dataset.type) {
        // ...Increment score and show it in the DOM
        updateScoreDisplay(++score);
        showPopup();
      }

code complet :

    //Function for the dropdown content
    let popup = document.querySelector("#popup");
    function showPopup() {
          if (score > 0) {
              popup.style.display ="block";
              console.log("hello");
          }
      }
    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
      
      // Declares global variables
      let score = 0,
        cardToMatch = null;
      
      // Calls `flipCard` on any click
      window.addEventListener("click", flipCard);
      
      
      // Defines the click listener
      function flipCard(event) {
      
        // Identifies the card where the click happened
        const card = event.target.closest(".card");
      
        // Ignores irrelevant/invalid clicks
        if (!card || card.classList.contains("open")) {
          return;
        }
      
        // A valid click always opens the card
        card.classList.add("open");
      
        // If this is the 1st card of 2, remember it
        if (cardToMatch === null) {
          cardToMatch = card;
        } else {
      
      
          // If it's the 2nd card, compare types
          // If they match...
          if (card.dataset.type === cardToMatch.dataset.type) {
      
            // ...Increment score and show it in the DOM
            updateScoreDisplay(++score);
            showPopup();
          }
      
          // If they don't...
          else {
            // ...Flip both cards back over
            setTimeout((first, second) => {
              first.classList.remove("open");
              second.classList.remove("open");
              
            }, 3000, card, cardToMatch);
            
            // Either way, next click will be the 1st of 2
          }
          
          cardToMatch = null;
        }
      }
      
      function updateScoreDisplay(newScore) {
        // Syncs the user-displayed value w/ score
        const element = document.querySelector(".score span");
        element.textContent = newScore;
      }

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

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

    header h1 {
      color: white;
      position: absolute;
      top: 10%;
      left: 38%;
      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:#010169;
    min-width: 160px;
    max-width: 400px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
    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: 10px;
      font-size: 30px;
    }

    /*The game section*/
    .sectionOne {
      max-width: 1100px;
      height: 550px;
      display: flex;
      justify-content: space-around;
      margin-top: 10px;
      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: 99%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 183px;
    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 );
    }
    }

    /* pop up section */
    #popup {
      position: absolute;
      background-color: white;
      width: 700px;
      height: 500px;
      z-index: 100;
      right: 50.5vh;
      top: 14%;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.808);
      border-radius: 8px;
      display: none;
    }

    .congrats {
      position: relative;
      display: flex;
      justify-content: center;
      height: 40px;
      top: 20%;
      color: #00005e;
      font-size: 40px;
    }

    .matches {
      position: relative;
      height: 40px;
      top: 35%;
      color: #00005e;
      display: flex;
      justify-content: center;
      font-size: 30px;
    }

    .playAgain {
      position: absolute;
      height: 40px;
      width: 150px;
      top: 65%;
      left: 40%;
      cursor: pointer;
      color: white;
      background-color: #00005e;
      border-style: none;
      font-size: 20px;
      border-radius: 5px;
    }

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

    /*The facts ticker*/
    .tcontainer {
    max-width: 1100px;
    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>ok</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">Score:<span> 0</span></div>

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

        <section id="popup">
            <h3 class="congrats">Congratulations!</h3>
            <h3 class="matches">You got 6/6 matches</h3>
            <button class="playAgain">Play again?</button>
        </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>
    </body>
    </html>

Et j'ai changé la section popup au idlieu de classcomme ça

 <section id="popup">