alguem poderia me dizer qual o erro aqui pff! https://jsfiddle.net/meqwfyud/ a ideia é mudar o background pela classe de acordo com o valor de cada input, mas o forEach não funciona
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
alguem poderia me dizer qual o erro aqui pff! https://jsfiddle.net/meqwfyud/ a ideia é mudar o background pela classe de acordo com o valor de cada input, mas o forEach não funciona
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!