-4

Tenho tentado criar um "dicionário" de acordes para teclados. Até o momento, criei um array com alguns acordes.

Ao clicar no botão com o nome do respectivo acorde, ele usa uma função para "colorir" as teclas que o compõe.

O problema aparece quando eu clico em outro botão para "trocar" de acorde, pois esse não "desmarca" as teclas do acorde anterior, mas sim, sobrepõe todas (uma bagunça).

Eu sei que preciso criar uma função para "limpar" esse estado, mas não sei como.

const acordes = [ 
    document.querySelectorAll("#c, #e, #g"), 
    document.querySelectorAll("#d, #f, #a"), 
    document.querySelectorAll("#e, #g, #b")
]


function chord(acordes) {
    for (let index = 0; index < acordes.length; index++) {
        acordes[index].classList.add("selecionada")   
    }
}
2
  • 2
    Não dá para visualizar quais são como pretende que os elementos da sua página interajam. Favor editar a pergunta e apresentar um Exemplo Mínimo, Completo e Verificável para que possamos esclarecer nossas dúvidas a respeito do seu problema e assim possamos dar respostas satisfatórias. Aproveite e veja Como perguntar e faça o nosso tour. Commented 20/05/2022 às 1:07
  • 1
    Seria bom editar e adicionar o HTML (e talvez o CSS, pelo menos a classe selecionada), e também descrever melhor qual é o comportamento desejado
    – hkotsubo
    Commented 20/05/2022 às 13:19

1 Resposta 1

-2

Toda vez que você quiser desfazer um .classList.add() você pode utilizar .classList.remove(), ele irá remover a classe desejada, no seu caso a classe "selecionada".

Pelo que entendi sempre que você adiciona "selecionada" você diz que aquela nota foi selecionada, então para desfazer basta remover a classe "selecionada", por exemplo:

for (let index = 0; index < acordes.length; index++) {
    acordes[index].classList.remove("selecionada")   
}

Essa função para "limpar" seria basicamente essa remoção da classe, como a pergunta não está tão detalhada, com códigos, inputs e outputs desejados só consigo te ajudar até aqui.

Caso precise de mais detalhes dessas funções que você está utilizando, recomendo ler a documentação do classList

1
  • Muito obrigado pela resposta. Peço desculpas por não ter detalhado mais a pergunta, sou meio novo nessa área e me faltou atenção. Na verdade, não tem nenhum input ou output, apenas botões para selecionar o "acorde" e um para "limpar. Mas acho que vou conseguir com a ajuda que já me deu. Grande abraço.
    – Caio Cesar
    Commented 20/05/2022 às 0:15

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .