如果答案正确，为什么我的词汇页面上没有出现弹出窗口？

Question

我对 Javascript 还很陌生，目前无法进一步了解。 我创建了一个词汇页面，到目前为止效果很好。 现在我想在正确回答时出现一个弹出窗口。

HTML

<main>
        <form onsubmit="compare(); return false;">

            <div class="flag">
                <a href="vocabularytest.html"><img src="img/EngFlag.png"></a>
                <img src="img/SpaFlag.jpg">
                <img src="img/FraFlag.jpg">
            </div>    
            <div class="TestText">
                <h4>Was bedeutet...</h4>
                <h2 id="word"></h2>
            </div>
            <div class="vokabelTest-germ">
                <input required type="text" id="germanTestText" placeholder="Deutsch ...">
                <label for="germanTestText"></label>
            </div>
            <div class="btnTest-cont">
                <button onclick="openPopUp()">Überprüfen
                    <span class="material-symbols-outlined">task_alt</span>
                </button>
                </div>
        
        </form> 
        
        <div class="popup" id="popup">
            <span class="material-symbols-outlined">check</span>
            <h2 id="compareText">Super :)</h2>
            <h4>weiter so...</h4>
            <button type="button">OK</button>
        </div>
</main> 

CSS

.popup {
    position: absolute;
    top: 0;
    right: 20px;
    width: 250px;
    height: 250px;
    background: var(--primary-color-light);
    text-align: center;
    border-radius: 20px;
    transform: scale(0.1);
    visibility: hidden;
    transition: 0.4s, top 0.4s;
}

.open-popup {
    top: 180px;
    transform: scale(1);
    visibility: visible;
}

JavaScript

let dictionaryEng = JSON.parse(localStorage.getItem("dictionaryEng")) || {};
let randomGermanWord;
let popUp = document.querySelector("#popup");

function addVocabulary() {
    dictionaryEng[germanText.value] = englishText.value;

    germanText.value = '';
    englishText.value = '';

    localStorage.setItem("dictionaryEng", JSON.stringify(dictionaryEng));
    render();
}

function render() {
    vocabularyList.innerHTML = '';
    for (let key in dictionaryEng) {
    vocabularyList.innerHTML += `<li>${key} -> ${dictionaryEng[key]}</li>`;
    }
}

function nextVocabulary() {
    let obj_keys = Object.keys(dictionaryEng);
    randomGermanWord = obj_keys[Math.floor(Math.random() * obj_keys.length)];
    word.innerHTML = `${dictionaryEng[randomGermanWord]}?`;
}

function compare() {
    if (germanTestText.value == randomGermanWord) {
        openPopUp();
    } else {
        compareText.innerHTML = 'Falsch!!!';
    }
    germanTestText.value = '';
    nextVocabulary();
}

function openPopUp() {
    popUp.classList.add(".open-popup");
}

一开始，我在弹出容器中没有 h2 元素，并且在 If 语句中我必须使用compareText...并且它起作用了。

在浏览器控制台中，CSS类也添加了，但是没有出现弹窗。

也许有人可以帮助我？ 请原谅我的英语，这只是谷歌翻译。

Answer 1

只是您必须删除类名字符串中函数 openPopUp 中的点。

这是正确的代码：

function openPopUp() {
    popUp.classList.add("open-popup");
}