Appliquer la fonction 'keypress'() au prochain élément une fois que la touche 'keypress' a changé la classe de l'élément sélectionné

J'ai pris une chaîne et créé un  pour chaque lettre de la chaîne. Mon but est de parcourir les travées, de prendre en compte le retour de pression de touche et de déterminer si la touche est «correcte» ou «incorrecte». Une fois que la classe appropriée a été assignée, je voudrais préformer la même fonction de touche sur l'élément span suivant. Je ne peux pas comprendre comment passer à la deuxième travée. La classe applique, mais tous les commentaires clé supplémentaire continue d'appliquer au premier élément Appliquer la fonction 'keypress'() au prochain élément une fois que la touche 'keypress' a changé la classe de l'élément sélectionné

exemple: e x a m p l e

window.addEventListener('keypress', function(event){ 
    var $current = document.querySelector('span') 
    var $next = document.querySelector('span').nextSibling 
    if ($activeChar === event.key) { 
    $current.classList.remove('current') 
    $current.classList.add('right') 
    } else { 
    $current.classList.remove('current') 
    $current.classList.add('wrong') 
    } 
    return $next.classList.add('current') 
})

Je suis très nouveau pour Javascript et je m'excuse d'avance pour mon manque de compréhension, mais je veux rn. J'ai référencé les livres de JS que j'ai et cherché haut et bas. Je n'ai pas trouvé de solution que je suis capable de mettre en œuvre par moi-même. Un grand merci

Source

2017-06-10 Aaron Keith

au lieu de définir les touches pressées à l'intérieur de l'écouteur d'événement prennent ce qui suit pour un tour:

var out = document.getElementById("output"); 
 

 
document.onkeydown = function(e){ 
 
    if(e.keyCode == 65) out.innerHTML = "a"; 
 
    if(e.keyCode == 66) out.innerHTML = "b"; 
 
    if(e.keyCode == 67) out.innerHTML = "c"; 
 
};

<body> 
 
<span id="output">press either the a, b, or c key</span> 
 
</body>

les utilisations suivantes e.keyCode qui est de fantaisie pour « valeur de clé ». Je trouve cela beaucoup plus facile à faire et si vous avez besoin d'une liste regarde juste ce keycode info

Pour vous but:

var out = document.getElementById("output"); 
 
var subedKey; 
 
var chosenKey; 
 

 
function start(){ 
 
    var rand = Math.floor(Math.random() * 3 + 1); 
 

 
    switch(rand){ 
 
    case 1: 
 
     chosenKey = "a"; 
 
     out.innerHTML = "press the a key"; 
 
    break; 
 
    case 2: 
 
     chosenKey = "b"; 
 
     out.innerHTML = "press the b key"; 
 
    break; 
 
    case 3: 
 
     chosenKey = "c"; 
 
     out.innerHTML = "press the c key"; 
 
    break; 
 
    default: console.log("no key was chosen"); 
 
    }; 
 
} 
 

 
start(); 
 
document.onkeydown = function(e){ 
 
    if(e.keyCode == 65){ out.innerHTML = "a"; subedKey = "a";} 
 
    if(e.keyCode == 66){ out.innerHTML = "b"; subedKey = "b";} 
 
    if(e.keyCode == 67){ out.innerHTML = "c"; subedKey = "c";} 
 
    if(subedKey == chosenKey){ 
 
    out.innerHTML = "correct"; 
 
    }else{ 
 
    out.innerHTML = "incorrect"; 
 
    } 
 
    window.setTimeout(start, 2000); 
 
};

<body> 
 
<span id="output">the letter is:</span> 
 
</body>

Source

2017-06-10 20:07:04

Liam, je vous remercie. C'est une excellente façon de résoudre ce problème. Je ne savais rien de la méthode e.keycode. Merci de m'avoir aidé dans ma quête continue d'apprendre. –

N'importe quand! J'utilise ce _tone_ quand je travaille avec 'canvas', si jamais vous avez besoin de moi pour vous montrer les ficelles avec lesquelles je serais heureux de! Mais si vous vous lancez dans le développement de jeux avec HTML et JavaScript, regardez certainement sur canvas –

Fantastic. J'ai entendu parler de la toile mais je n'ai jamais creusé dedans. Je pourrais très bien vous envoyer un message pour l'avenir. Merci beaucoup! –

Vous avez eu quelques problèmes avec votre code. Premièrement, vous auriez toujours sélectionné le premier élément, et non l'actuel, donc j'ai ajouté une classe à votre span, et sélectionnez par elle. Deuxièmement, vous ne définissez pas $activeChar Troisièmement, nextSibling ne retournera pas ce que vous attendez. nextElementSibling se

window.addEventListener('keypress', function(event) { 
 
    var $current = document.querySelector('span.current') 
 
    var $next = $current.nextElementSibling 
 
    var $activeChar = $current.innerText 
 
    if ($activeChar === event.key) { 
 
    $current.classList.remove('current') 
 
    $current.classList.add('right') 
 
    } else { 
 
    $current.classList.remove('current') 
 
    $current.classList.add('wrong') 
 
    } 
 
    return $next.classList.add('current') 
 
})

.current { 
 
    background-color: blue; 
 
} 
 

 
.right { 
 
    background-color: green; 
 
} 
 

 
.wrong { 
 
    background-color: red; 
 
}

<span class='current'>e</span> <span>x</span> <span>a</span> <span>m</span> <span>p</span> <span>l</span> <span>e</span>

Source

2017-06-10 20:11:06

Alexey, vous êtes génial. Merci beaucoup de partager vos connaissances. Des gens comme vous m'aident à rester positif dans ma quête d'apprendre. –

Heureux d'entendre. S'il vous plaît marquer comme la bonne réponse, si c'était en effet un :) –

Appliquer la fonction 'keypress'() au prochain élément <span> une fois que la touche 'keypress' a changé la classe de l'élément <span> sélectionné

Répondre

Appliquer la fonction 'keypress'() au prochain élément <span> une fois que la touche 'keypress' a changé la classe de l'élément <span> sélectionné

Répondre

Questions connexes