Bienvenido a la Comunidad de Treehouse

¿Quieres colaborar en errores de código? ¿Tienes errores que necesitan comentarios? ¿Buscas un par de ojos adicionales en tu último proyecto? aquí.

¿Buscas aprender algo nuevo?

Treehouse ofrece una prueba gratuita de siete días para estudiantes nuevos. Obtén acceso a miles de horas de contenido y únete a miles de

Inicia tu prueba gratuita

JavaScript Bucles en JavaScript Trabajar con Bucles 'for' El Desafío de Refactorización

Publicado por Casey Beaver
Casey Beaver
5,619 Puntos

No puedo hacer que el RGB se complete correctamente en el html. Así que no aparece ningún color de fondo. ¿Alguien puede ayudar?

Tengo dos registros dentro de mi código que me muestran que mi RGB se está generando, pero el html no lo reconoce ya que todos mis fondos son blancos. ¿Qué estoy haciendo mal?

let [red, green, blue] = [0];

function getNumber() {

red = getNumber();

for (i = 0; i <= 10; i++) { rgb( ${red}, ${green}, ${blue} ) console.log(randomRGB); <div style=background-color: ${randomRGB}">${i}</div>;

main.innerHTML = html;

6 Respuestas

Peter Vann
Peter Vann
36,429 Puntos

¡Hola Casey!

Por cierto, para probar puedes pegar este código:

<!DOCTYPE html>
<html>
<body>

<main></main>

<script>
//let [red, green, blue] = [0];
let valores randomRGB;
let html = '';
const main = documento.querySelector('main');

función getNumber() {
    return Math.floor(Math.aleatorio() * 256);
}

para (i = 0; i <= 10; i++) {
    let red = getNumber();
    let green = getNumber();
    let azul = getNumber();

    console.log(red, green, azul);

    let valores randomRGB = `rgb(${red}, ${green}, ${azul})`;
    console.log(valores randomRGB);
    html += `<div style="background-color: ${valores randomRGB}">${i}</div>`;
}

main.innerHTML = html;
</script>

</body>
</html>

En el panel izquierdo aquí (sobrescribe completamente lo que hay) y ejecútalo:

https://www.w3schools.com/js/tryit.asp?filename=tryjs_array

Más información (Markdown):

https://github.com/treehouse/cheatsheets/blob/master/markdown_basics/cheatsheet.md

https://teamtreehouse.com/community/howto-guide-markdown-within-posts

Espero que eso ayude.

¡Manténgase seguro y feliz codificando!

Casey Beaver
Casey Beaver
5,619 Puntos

Hola Peter,

Así que tu código funcionó cuando lo pegué en ambos el enlace que proporcionaste Y el editor del espacio de trabajo (solo copié lo que está entre las etiquetas <script> para el editor del espacio de trabajo mientras copié todo para el enlace.

Lo que es realmente extraño es que cuando vuelvo a lo que tenía y lo reescribo exactamente como lo hiciste, no obtengo fondos. A menos que esté loco, lo tengo carácter por carácter. Aquí está lo que tengo que no funciona (mientras que el tuyo sí):

let valores randomRGB;
let html = '';
const main = documento.querySelector('main');

función getNumber() {
 return Math.floor(Math.aleatorio() * 256); 
}

para (i = 0; i <= 10; i++) {
  let red = getNumber();
  let green = getNumber();
  let azul = getNumber();

  console.log(red, green, azul);

  let valores randomRGB = `rgb(${red}, ${green}, ${azul})`;
  console.log(valores randomRGB);
  html += `<div style=background-color: ${valores randomRGB}">${i}</div>`;
}

main.innerHTML = html;

Además, aquí está mi html

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Bucles JavaScript – Desafío</title>
    <link href=css/style.css rel=stylesheet> 
  </head>
  <body>
    <main></main>
    <script src=js/script.js></script>
  </body>
</html>
Peter Vann
Peter Vann
36,429 Puntos
Peter Vann
Peter Vann
36,429 Puntos

¡Hola Casey!

Un problema que veo de inmediato es que tu literal de plantilla carece de comillas invertidas.

Esto:

let valores randomRGB = rgb( ${red}, ${green}, ${azul} )

Debería ser:

let valores randomRGB = `rgb( ${red}, ${green}, ${azul} )`;

Eso debería hacerte avanzar, de todas formas...

Espero que eso ayude.

¡Manténgase seguro y feliz codificando!

Casey Beaver
Casey Beaver
5,619 Puntos

Hola Peter,

Gracias por responder. Desafortunadamente sí tengo esas comillas invertidas, simplemente no siempre se traducen considerando que aún no he usado la hoja de trucos de markdown. Déjame intentar esto:

let [red, green, azul] = [0];
let valores randomRGB;
let html = '';
const main = documento.querySelector('main');

función getNumber() {
return Math.floor(Math.aleatorio() * 256); 
}

red = getNumber();
green = getNumber();
azul = getNumber();
console.log(red, green, azul);

para (i = 0; i <= 10; i++) {
 let valores randomRGB = `rgb( ${red}, ${green}, ${azul} )`;
 console.log(valores randomRGB); 
 html += `<div style=background-color: ${valores randomRGB}">${i}</div>`;
}

main.innerHTML = html;

Eso sigue dándome los mismos fondos blancos.

Editar: como nota adicional, ¿puedes decirme para qué están las comillas después de ${randomRGB} (en el bucle for)? Estaban en el código del espacio de trabajo predeterminado y estoy un poco confundido sobre por qué solo hay un conjunto.

Gracias nuevamente por toda tu ayuda.

Peter Vann
Peter Vann
36,429 Puntos
Peter Vann
Peter Vann
36,429 Puntos

Hola Casey

Un problema de inmediato es que falta una comilla doble en esta línea:

html += `<div style=background-color: ${valores randomRGB}">${i}</div>`;

(Después de style= )

Debería ser:

html += `<div style="background-color: ${valores randomRGB}">${i}</div>`;

Intenta algo más como esto:

//let [red, green, blue] = [0]; // ¡No es necesario según lo que pueda ver!?!
let valores randomRGB;
let html = '';
const main = documento.querySelector('main');

función getNumber() {
    return Math.floor(Math.aleatorio() * 256);
}

para (i = 0; i <= 10; i++) {
    let red = getNumber();
    let green = getNumber();
    let azul = getNumber();

    console.log(red, green, azul);

    let valores randomRGB = `rgb(${red}, ${green}, ${azul})`;
    console.log(valores randomRGB);
    html += `<div style="background-color: ${valores randomRGB}">${i}</div>`;
}

main.innerHTML = html;

Espero que eso ayude.

¡Manténgase seguro y feliz codificando!

Peter Vann
Peter Vann
36,429 Puntos
Peter Vann
Peter Vann
36,429 Puntos

¡Hola Casey!

Todavía te falta la primera comilla doble en esta línea:

html += `<div style=background-color: ${valores randomRGB}">${i}</div>`;
                    ^                             ^
                 (Aquí)                   (A match this uno)

(Antes de la palabra background)

Pero también he experimentado esto:

Una cosa que he descubierto, que es realmente extraña y desconcertante, es que de vez en cuando escribo código que sé que es 100% correcto, ¡pero SIMPLEMENTE NO PASARÁ!?! Digamos que el desafío quiere que una variable sea igual al texto "¡Soy un gran programador!" Y si escribo el texto yo mismo, falla, pero si copio y pego el texto del mismo texto del desafío, ¡entonces pasa AUNQUE SEA PALABRA POR PALABRA LO MISMO!?! Es una solución que descubrí solo por prueba y error. ¡NO TENGO IDEA de por qué haría una diferencia, pero de alguna manera la hace!?!

Una herramienta que uso que me ayuda a detectar errores tipográficos (y cualquier diferencia en dos piezas de código aparentemente idénticas) es esta:

https://text-compare.com/

Espero que eso ayude.

¡Manténgase seguro y feliz codificando!

Peter Vann
Peter Vann
36,429 Puntos
Peter Vann
Peter Vann
36,429 Puntos

Casey,

¡Ciertamente eres bienvenido!

Se siente bien ayudar a cualquiera que tenga dificultades con los desafíos.

Avanzando a través de los rangos, ciertamente he tenido mi parte de desafíos que simplemente no podía hacer pasar y casi literalmente me he arrancado el cabello tratando de descubrir el problema (¡a menudo ni siquiera siendo sintaxis impropia)!?!

¡Realmente apesta cuando estás atrapado en un problema técnico o un error tipográfico tonto (o incluso parece que tal vez el video no cubrió el tema lo suficientemente bien)!?!

Así que cualquier sabiduría, consejo y truco que pueda compartir, seguramente lo hago.

¡Estoy seguro de que tú también lo transmitirás cuando puedas!

¡Que tengas un gran (resto del) fin de semana!

-Pete

PD: Puede que esto te resulte divertido - mi versión del clásico desafío de codificación "Simon Game*" (LOL):

https://codepen.io/petrovnikov/full/MXxQPx

*(https://www.youtube.com/watch?v=1Yqj76Q4jJ4)

Casey Beaver
Casey Beaver
5,619 Puntos
Casey Beaver
Casey Beaver
5,619 Puntos

¡Muchas gracias Peter!

Ese " ¡lo hizo funcionar! Pero lo más importante es que aprecio tu paciencia y el código que proporcionaste porque me hizo pensar de una manera diferente. Realmente no puedo enfatizar eso lo suficiente.

Esta es una comunidad muy buena para aprender. No es como ninguna en la que haya estado antes.

¡Saludos!