Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Exibir o resultado de uma variavel fora da function

por Adler Santos Rodrigues
| 45.4k xp | 12 posts

Eu estou fazendo um programa para gerar cor aleatoria, mas quando eu tento exibir o resultado do gerarCor fora da function ele da como "undefined".

var button = document.querySelector('#buttonGenerator');
var red = 0,
    green = 0,
    blue = 0,
    numColor = 255,
    fundo = document.querySelector('#fundoCor'),
    colorText = document.querySelector('h4'),
    corGerada;

button.onclick = function adicionarCor(){
  red = Math.round(Math.random() * numColor);
  green = Math.round(Math.random() * numColor);
  blue = Math.round(Math.random() * numColor);

  corGerada = `rgb(${red}, ${green}, ${blue})`;
  colorText.textContent = corGerada;

  fundo.style.backgroundColor = corGerada;

}

console.log(corGerada)
3 respostas
por Steve Jamerson
| 106.2k xp | 23 posts

Boa tarde,

O log está fora do escopo, então, ele só executa uma vez no carregamento, e sua variável corGerada, não tem valor, sendo assim, 'undefined'.

<body>
    <button id="buttonGenerator"> buttom </button>
    <h4>Cor</h4>
</body>

<script>
var button = document.querySelector('#buttonGenerator');
var red = 0,
    green = 0,
    blue = 0,
    numColor = 255,
    fundo = document.querySelector('#fundoCor'),
    colorText = document.querySelector('h4'),
    corGerada;

button.onclick = function adicionarCor(){
  red = Math.round(Math.random() * numColor);
  green = Math.round(Math.random() * numColor);
  blue = Math.round(Math.random() * numColor);

  corGerada = `rgb(${red}, ${green}, ${blue})`;
  colorText.textContent = corGerada;

  fundo.style.backgroundColor = corGerada;

//coloque aqui o log
console.log(corGerada);
}
</script>
por Adler Santos Rodrigues
| 45.4k xp | 12 posts

Mas não teria um jeito de exibir o resultado dessa função fora dela? que eu iria usar o resultado dessa variavel em outra função também

solução!
por Steve Jamerson
| 106.2k xp | 23 posts

A sua função está correta, a variável está recebendo a cor, mas a forma como está usando ela, pode ser que a outra função não esteja recebendo a variável. O complicado é existe varias formas de se fazer, vou fazer um exemplo em cima do mesmo codigo.

<body>
    <div id="fundo1" class="fundo">

        <button id="button1" class="button" onclick="adicionarCor1()"> buttom1 </button>
        <h4 id="texto1" class="texto">Cor</h4>
    </div>

    <div id="fundo2" class="fundo">
        <button id="button2" class="button" onclick="adicionarCor2()"> buttom2 </button>
        <h4 id="texto2" class="texto">Cor</h4>
    </div>

    <div id="fundo3" class="fundo">
        <button class="button" onclick="adicionarCorTodos()"> buttom3 </button>
        <h4 class="texto">Cor</h4>
    </div>
</body>

<script>
    var button1 = document.querySelector('#button1');
    var button2 = document.querySelector('#button2');
    var button3 = document.querySelector('#button3');
    var red = 0,
        green = 0,
        blue = 0,
        numColor = 255,

        fundo1 = document.querySelector('#fundo1'),
        colorText1 = document.querySelector('#texto1'),

        fundo2 = document.querySelector('#fundo2'),
        colorText2 = document.querySelector('#texto2'),

//usei do selectAll para pegar todos com a class fundo
        fundo = document.querySelectorAll('.fundo'),
        colorText = document.querySelectorAll('.texto'),

        corGerada;

//muda só a primeira div
    function adicionarCor1() {
        red = Math.round(Math.random() * numColor);
        green = Math.round(Math.random() * numColor);
        blue = Math.round(Math.random() * numColor);

        corGerada = `rgb(${red}, ${green}, ${blue})`;
        colorText1.textContent = corGerada;

        fundo1.style.backgroundColor = corGerada;

    }
//muda só a segunda div
    function adicionarCor2() {
        red = Math.round(Math.random() * numColor);
        green = Math.round(Math.random() * numColor);
        blue = Math.round(Math.random() * numColor);

        corGerada = `rgb(${red}, ${green}, ${blue})`;
        colorText2.textContent = corGerada;

        fundo2.style.backgroundColor = corGerada;

    }

//muda todas as divs
    function adicionarCorTodos() {
        red = Math.round(Math.random() * numColor);
        green = Math.round(Math.random() * numColor);
        blue = Math.round(Math.random() * numColor);

        corGerada = `rgb(${red}, ${green}, ${blue})`;

//aqui se faz o for, pois no JS puro, mesmo com selectAll não vai direto, como no jQuery
        for (let i = 0; i < fundo.length; i++) {
            colorText[i].textContent = corGerada;
            fundo[i].style.backgroundColor = corGerada;
        }
    }
</script>

Espero ter ajudado mais que confundido. rs