classList.remove 不工作

Question

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

这是我的HTML。结果在 div 内，在这个 div 内还有另外 5 个 div 和 class。这个想法是，当提交您的答案时，div 之一的 class 被删除。

<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

Class 名称前面没有点（这是 CSS 选择器）：

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

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

classList.remove 不工作

classList.remove not working

html

javascript

dom-manipulation