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');

classList.remove不工作

1 个答案: