Alterar a cor de tds os quadrados no js

Front-end
#1

consegui criar um quadrado que fica alterando de cor
consegui criar vários outros quadrado com click

o que acontece:
não consigo alterar a cor dos restantes quadrados…
e uma duvida: pq quando altera de cor do quadrado , os restantes dos quadrados não altera também sendo que os ids são os mesmos?

alguém poderia me ajudar ?
sou novo em programação
tem uma div id=“app” /div para colocar antes do script

    <script>
        //criando o botão , btn é pai e btnText é filho
        var btn = document.createElement('button')
        btn.setAttribute('type', 'button')
        btn.setAttribute('onClick','teste()')
        var btnText = document.createTextNode('Clicar')
        btn.appendChild(btnText)
        var enviar = document.getElementById('app')
        enviar.appendChild(btn)
        function teste(){
            var criar = document.createElement("DIV");
                criar.setAttribute('id','teste')
                criar.style.width = "100px";
                criar.style.height = "100px";
                criar.style.backgroundColor='#f00';
                document.body.appendChild(criar)
                criar.setAttribute('onclick','criando(this.id)')
        }
       function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
        function criando(k){
            var cor = document.getElementById(k).style.background = getRandomColor();        
        }
    </script>

exercício 2 rocketseat https://skylab.rocketseat.com.br/api/files/1566499161406.pdf

#2

O id de um elemento deve ser único. Se deseja selecionar muitos elementos, é melhor selecionar pelo nome da classe.

#3

Também pode usar o seguinte,
var divs = document.querySelectorAll( ‘div’ )

#4

não sei mais o que fazer …
coloquei querySelectorAll pensando que ia pegar todas as classe mas da erro " TypeError: Cannot set property ‘backgroundColor’ of undefined"

</div>

    <script>


        var btn = document.createElement('button')
        btn.setAttribute('type', 'button')
        btn.setAttribute('onClick','teste()')
        var btnText = document.createTextNode('Clicar')
        btn.appendChild(btnText)


        var enviar = document.getElementById('app')
        enviar.appendChild(btn)

        function teste(){
            var criar = document.createElement("DIV");
                criar.setAttribute('class','teste');
                criar.style.width = "100px";
                criar.style.height = "100px";
                criar.style.backgroundColor='#f00';
                document.body.appendChild(criar);
                
                criar.setAttribute('onclick','classse()')
        }   
            
            var clique=document.querySelector('div')
                
        
        function getRandomColor() {
            var letters = "0123456789ABCDEF";
            var color = "#";
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }

            return color;
            
        }
        function classse(){
            //var x = document.getElementsByClassName("teste").style.backgroundColor = getRandomColor();
            var x = document.querySelectorAll("class").style.backgroundColor = getRandomColor();
        }
        
      

    </script>
#5

Exemplo: https://jsbin.com/guluxiqulu/edit?html,css,js,output

#6

Boa tarde ,
obrigado @edsfernando1 e por ter explicado e ter dado a dica , com isso aprendi mas testando até acerta o cod kkk
vlw @javaflex com seu exemplo, conheci outro cenário do cod, mas não era o que eu queria ainda…

enfim , conseguir ! veja o resultado:

1 curtida
#7

ahh , pode fechar o tópico , vlwwww