Bom dia, estou estudando javascript e me deparei com um problema: Criei uma lógica onde disponibilizo dois botões, um para liberar acesso que quando clicado fica na tela apenas o ícone de check, e o bloquear que quando clicado fica apenas o ícone de bloqueado. O problema é que se podem ser mudado os ícones dos itens checados, porém, mesmo com os dois itens checados o único que muda o ícone é o primeiro. Estou mudando o ícone deixando seu display "none" e "initial" fiz dessa forma porque não conheço outra forma, se souberem algo com javascript agradeço, mas, a questão é como faço para a mudança de ícone acontecerem em todos itens checados e não apenas no primeiro ? Obrigado.
JS:
function bloquearAcesso(){
let inputs = document.querySelectorAll(".checar");
for(let i = 0; i< inputs.length; i++){
if(inputs[i].checked == true){
document.getElementById("liberado").style.display = "none";
document.getElementById("bloqueado").style.display = "initial";
}
};
};
function liberarAcesso(){
let inputs = document.querySelectorAll(".checar");
for(let i = 0; i < inputs.length; i++){
if (inputs[i].checked == true){
document.getElementById("bloqueado").style.display = "none";
document.getElementById("liberado").style.display = "initial";
};
};
}
HTML:
<html>
<body>
<div class="box-body no-padding">
<table class="table table-striped">
<thead>
<tr>
<th>Patio</th>
<th>Acessar Desktop</th>
<th>Criado em</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checar" type="checkbox">Patio1</td>
<td> <i id="liberado" class="fa fa-check"></i> <i id="bloqueado" class="far fa-times-circle"></i></td>
<td>02/04/2018</td>
<td>
</td>
</tr>
<tr>
<td><input class="checar" type="checkbox">Patio2</td>
<td> <i id="liberado" class="fa fa-check"></i> <i id="bloqueado" class="far fa-times-circle"></i></td>
<td>02/04/2018</td>
</tr>
<br/>
</tbody>
</table>
<button onclick="liberarAcesso()" type="button" class="btn btn-primary btn-xs btn-flat">Liberar acesso</button>
<button onclick="bloquearAcesso()" type="button" class="btn btn-danger btn-xs btn-flat">Bloquear acesso</button>
</div>
<script src="./curso.js">
</script>
</body>
</html>
document.getElementByClassName("liberado")
oudocument.querySelectorAll(".liberado")
... aí vc tem que fazer um laço para pegar o elemento pelo índice. O conjunto dos elementos de mesma classe é uma array. Para pegar o primeiro, por exemplo, vc faria:document.getElementByClassName("liberado")[0]