Tengo una función que crea aleatoriamente divs con círculos.
Tiene una opción de color aleatoria para el borde. Funciona como deberia.
También agregué una sombra de cuadro y quiero que el color cambie de la misma manera que el borde.
Hice todo por analogía como con el borde, pero me sale un error:
"mensaje": "Error de sintaxis no detectado: Token no válido o inesperado"
¿Cómo puedo establecer un color aleatorio para la sombra del cuadro?
function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('id', id); if (color === undefined) { let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547']; div.style.borderColor = colors[Math.floor(Math.random() * colors.length)]; div.style.boxShadow = 0px 0px 15px 5px colors[Math.floor(Math.random() * colors.length)]; } else { div.style.borderColor = color; div.style.boxShadow = 0px 0px 15px 5px color; } div.classList.add("circle"); document.body.appendChild(div); } let i = 0; const oneSeconds = 1000; setInterval(() => { i += 1; createDiv(`div-${i}`) }, oneSeconds); div { display: inline-block; margin: 20px; } .circle { width: 80px; height: 80px; border-radius: 80px; background-color: #ffffff; border: 3px solid #000; box-shadow: 0px 0px 15px 5px #0ff; margin: 20px; }"Error de sintaxis no detectado: token no válido o inesperado" básicamente significa que su computadora no puede analizar/comprender el código que proporcionó.
La sintaxis se define como:
la disposición de palabras y frases para crear oraciones bien formadas en un idioma.
cuando vea un error de sintaxis; es porque tu código está mal formado.
En este caso específico, deberá asegurarse de que js reciba una cadena en lugar de propiedades separadas:
div.style.boxShadow = 0px 0px 15px 5px color;se convierte
div.style.boxShadow = "0px 0px 15px 5px "+ color; function createDiv(id, color) { let div = document.createElement('div'); div.setAttribute('id', id); if (color === undefined) { let colors = ['#35def2', '#35f242', '#b2f235', '#f2ad35', '#f24735', '#3554f2', '#8535f2', '#eb35f2', '#f2359b', '#f23547']; div.style.borderColor = colors[Math.floor(Math.random() * colors.length)]; div.style.boxShadow = "0px 0px 15px 5px "+colors[Math.floor(Math.random() * colors.length)]; } else { div.style.borderColor = color; div.style.boxShadow = "0px 0px 15px 5px "+ color; } div.classList.add("circle"); document.body.appendChild(div); } let i = 0; const oneSeconds = 1000; setInterval(() => { i += 1; createDiv(`div-${i}`) }, oneSeconds); div { display: inline-block; margin: 20px; } .circle { width: 80px; height: 80px; border-radius: 80px; background-color: #ffffff; border: 3px solid #000; box-shadow: 0px 0px 15px 5px #0ff; margin: 20px; }