forEach duvida/erro

Veja esse link: http://stackoverflow.com/questions/24266313/using-foreach-on-an-array-from-getelementsbyclassname-results-in-typeerror-und

getElementsByClassName retorna um HTMLCollection e não um Array. Então o seu forEach deverá ser da seguinte forma:

Array.prototype.forEach.call(dados, dado => {

var dados = [...document.getElementsByClassName('x')];
console.log("Dados in array:", dados);

dados.forEach(dado => {
    console.log("Dado->:", dado);
    console.log("Dado->:", dado.className);
    dado.addEventListener('blur',function(e){
    var classe = dado.value == 1 ? 'x' : 'y';
        dado.className = classe; 
    });
});

https://jsfiddle.net/meqwfyud/12/

Era isso?

(Note que 'e' é uma referência ao evento que é passado para as funções de ação no javascript)

Lucas Silva o que o "..." que vc colocou antes do document faz ?

essa estrutura do forEach(dado => {}], tem algum link explicando ? os sites que vi o forEach aceita uma função de parâmetro.

gostaria de entender melhor o que o" => {} " significa. se é uma função que estou criando ou o que for, desculpa as perguntas estou começando agora

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

Opa, esse operador chama spread operator (aprendi ontem sobre isso, aqui mesmo na Alura xD ) Ele basicamente faz com que um array passado como parâmetro seja quebrado em uma lista de argumentos para uma função. Dúvida? Seguinte:

    function somasse(a, b, c){
        if(c == 1){
            return a + b;
        }
        else{
            return 0;
        }
    }

A função somasse recebe tipicamente 3 parâmetros, porém podemos chamar a função da seguinte maneira:

    let result = somasse(...[3,4,1]);

Dessa forma o array literal [3,4,1] será desmembrado e será assinalado às três variáveis a, b e c. (O comportamento 'interno' seria mais ou menos isso):

a = 3;
b = 4;
c = 1;

Agora com relação ao => chama-se arrow function (acabei de aprender sobre isso também).

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Basicamente, é uma maneira menos verbosa de se fazer uma função. Seguinte:

    let arr = [10, 20, 30];
    // Faça uma função que some 10 unidades pra cada elemento, sem alterar o array original
    let arr2 = []; // Cria array vazio.
    arr.map(function(item){ //anonymous function (Lê-se: só uma simples função na qual não atribuímos nome por simples comodidade E por conta do escopo dessa função ser local (Ah, o primeiro parâmetro da função refere-se a um "iterador" que representa um item do array, quase como um: arr[i], certo?
        arr2.push(item+10);
    });

Okay com a função acima? Então, podemos fazer isso de uma forma mais legal:

let arr = [10, 20, 30];
    // Faça uma função que some 10 unidades pra cada elemento, sem alterar o array original
    let arr2 = []; // Cria array vazio.
    arr.map((item) => {
        arr2.push(item+10);
    });

Note que só omitimos a palavra function Mas, ainda podemos melhorar. Como a função de flecha (tradução literal, rs) só tem uma única instrução podemos encurtá-la para:

let arr = [10, 20, 30];
    // Faça uma função que some 10 unidades pra cada elemento, sem alterar o array original
    let arr2 = []; // Cria array vazio.
    arr.map((item) =>arr2.push(item+10) );

Note a ausência dos {} e do ;. Explicado?

Só pra complementar, o curso que eu aprendi essas coisas é o curso: JavaScript Avançado I e pode ser encontrado aqui:

https://cursos.alura.com.br/course/javascript-es6-orientacao-a-objetos-parte-1

[... "Não existe pergunta medíocre, medíocre é não perguntar!" ... ]

Cara muito obrigado mesmo! Deu pra entender bastante seu exemplo vlw!