javascript - classList.remove 不起作用

Question

我尝试使用 classList.remove 显示测验结果，但这不起作用。

这是我的 HTML。结果位于一个 div 内，该 div 内还有 5 个具有类的其他 div。这个想法是，当提交答案时，其中一个 div 的类将被删除。

<div class="uitslag">
    <div class="ShuriPartner">
        <h3>Shuri</h3>
        <p>Jouw superheld partner is Shuri. Je bent ontzettend sterk en vastberaden, maar je hebt iemand nodig die slim is. Shuri is de slimste superheld en is daarom perfect voor jouw.</p>
        <img src="images/shuri.png" alt="Shuri">
        <!--Afbeelding via https://metropolis-hero1125.deviantart.com/art/Thor-Ragnarok-Thor-PNG-694373927-->
    </div>

    <div class="RocketPartner">
        <p>Jouw superheld partner is Rocket. Je bent sterk , maar je hebt iemand nodig die slim is. Rocket is slim en heeft altijd een oplossing om uit de problemen te komen, perfect voor jou!</p>
        <img src="images/rocket.png" alt="Rocket">
        <!--Afbeelding via http://collectionstash.com/collectibles/catalog/page:22/sort:Manufacture.title/direction:asc?url=collectibles%2Fsearch&m=2&o=a-->
    </div>

    <div class="ThorPartner">
        <p>Jouw superheld partner is Thor. Je bent slim, maar niet , maar je hebt iemand nodig die sterk is en iemand kan is. Thor is sterk en kan een groep leiden, en is daarom perfect voor jouw.</p>
        <img src="images/thor.png" alt="Thor">
        <!--Afbeelding via http://www.eonline.com/photos/20422/thor-ragnarok-movie-pics/786575-->
    </div>

    <div class="WinterSoldierPartner">
        <p>Jouw superheld partner is de Winter Soldier. Je bent slim maar niet zo slim. Je hebt iemand nodig die sterk is. De Winter Solder kan goed omgaan met wapens en doet precies wat jij zegt en kan jouw goed helpen.</p>
        <img src="images/wintersoldier.png" alt="Winter Soldier">
        <!--Afbeelding via http://www.eonline.com/photos/20422/thor-ragnarok-movie-pics/786575-->
    </div>

    <div class="HulkPartner">
        <p>Jouw superheld partner is de Hulk. Je bent slim maar niet zo slim. Je hebt iemand nodig die sterk is. De Hulk is ontzettend sterk en kan jouw goed helpen.</p>
        <img src="images/hulk.png" alt="Hulk">
        <!--Afbeelding via http://ultimate-marvel-cinematic-universe.wikia.com/wiki/Hulk-->
    </div>
</div>

这是我的 JavaScript

function jouwPartner(event) {
//Hier een preventdevault omdat wanneer op verzendenn wordt gedrukt deze functie als eerst wordt aangeroepen.
event.preventDefault();
var punten = vijand() + eigenschappen() + kleurKiezen() + rekenen();
var superhelden = ['Shuri', 'Rocket', 'Thor', 'Winter Soldier', 'Hulk'];
var partner;
var i;

for (i = 0; i < superhelden.length; i++) {
    if (punten === 0) {
        partner = superhelden[0];
    } else if (punten === 1) {
        partner = superhelden[1];
    } else if (punten === 2) {
        partner = superhelden[2];
    } else if (punten === 3) {
        partner = superhelden[3];
    } else if (punten === 4) {
        partner = superhelden[4];
    }
}

//Roep hier de verhaal(partner); aan, omdat ik in de if/else statements partner gebruik. Ik stop de variable in de parameter. Als superhelden bijv. Shuri is wordt partner superhelden en wordt dit meegegeven als parameter voor de functie verhaal.
verhaal(partner); }



//Deel 6: Bericht aan gebruiker
function verhaal(persoon) {
var tekst1 = document.querySelector('.uitslag > div:nth-of-type(1)');
var tekst2 = document.querySelector('.uitslag > div:nth-of-type(2)');
var tekst3 = document.querySelector('.uitslag > div:nth-of-type(3)');
var tekst4 = document.querySelector('.uitslag > div:nth-of-type(4)');
var tekst5 = document.querySelector('.uitslag > div:nth-of-type(5)');

//Met deze if else statement laten we zien wie de partner van de gebruiker is.
if (persoon == 'Shuri') {
    tekst1.classList.remove('.ShuriPartner');

} else if (persoon == 'Rocket') {
    tekst2.classList.remove('.RocketPartner');

} else if (persoon == 'Thor') {
    tekst3.classList.remove('.ThorPartner');

} else if (persoon == 'Winter Soldier') {
    tekst4.classList.remove('.WinterSoldierPartner');

} else if (persoon == 'Hulk') {
    tekst5.classList.remove('.HulkPartner');

} }

document.querySelector('#quiz').addEventListener('submit', jouwPartner);

这是我的CSS

.ShuriPartner {
display: none;}

.RocketPartner {
display: none;}

.ThorPartner {
display: none;}

.WinterSoldierPartner {
display: none;}

.HulkPartner {
display: none;}

Answer 1

类名前面没有点(这是一个 CSS 选择器):

// No such class
tekst1.classList.remove('.ShuriPartner');

// Correct
tekst1.classList.remove('ShuriPartner');