0

Objetivo e pega um texto invisivel com efeito css visibility: hidden; e atravéz do javaScript quero passar uma função que quando eu apertar um botão todas as classes com visibility: hidden fiquem visivel.. deram pra entender?

Tenho o seguinte codigo

function ativa (){

// buscando as classes com efeito hidden

    var x = document.getElementsByClassName('.answerr');

//botando o novo efeito para quando eu apertar o button* a class apareça

    var newclass = document.createAtributte('class' 'newclass');

    x.setAttribute(newclass);
}

css

.answerr {visibility:hidden;}

//novo estilo que quero adicinar

.newclass{
     visibility:visible;
}
0

2 Respostas 2

3

Começo por mencionar que getElementsByClassName devolve uma lista de elementos que tem a classe especificada. Tem passar apenas o nome da classe que seria answer e não .answerr como fez, pois isso já seria um seletor.

Se devolve uma lista de elementos então tem de utilizar um for para fazer as modificações em todos.

A forma mais direta de adicionar e remover classes a um elemento em Javascript puro é utilizando classList. Esta tem o método add para adicionar uma nova classe e remove para remover. Então no seu caso pode remover a classe antiga e adicionar a nova.

Exemplo:

document.getElementById("ativa").addEventListener("click", function(){
  const escondidos = document.getElementsByClassName('answerr'); //sem o .
  
  for (let i = 0; i < escondidos.length; ++i){
    escondidos[i].classList.remove("answerr"); //tirar a classe antiga
    escondidos[i].classList.add("newclass"); //por a nova
  }
});
.answerr {visibility:hidden;}
.newclass{
     visibility:visible;
}
<div>div1</div>
<div>div2</div>
<div class="answerr">div3</div>
<div class="answerr">div4</div>
<button id="ativa">Ativa</button>

Como sugestão, dê nomes mais claros tanto às variáveis que cria no Javascript como às classes em css. As que tem são bem difíceis de decifrar o que significam e vão lhe dificultar no futuro quando voltar a rever o código.

0

Tente isso:

var elementos = document.querySelectorAll('.answerr');

elementos.forEach(function(x){
  x.classList.add('newclass');
});

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 .