Rusty25 Rusty25 - 7 months ago 11
Javascript Question

Incorporating JavaScript into HTML to create a pantone-style column

I'm trying to make a pantone-style column, with one totally red div and the others all decreasing shades of that red. Basically, I've got a variable 'op' for opacity, that starts at 1 and decreases until it's equal to .1. Here's the code that I use (on Codepen). '.column' is my big container, and '.box' is for all the smaller divs. My issue is that the editor doesn't recognize 'op' as part of the div's style. How can I fix this?

var op = 1;
for (var i = 0; i <= 10; i++) {
$('.column').append('<div class="box", style="opacity:op;">Hello.</div>')
op = op - .1
}

Answer
var op = 1;
for (var i = 0; i <= 10; i++) {
$('.column').append('<div class="box", style="opacity:'+op+';">Hello.</div>')
op = op - .1
}

Insert the variable

Javascript doesn't have a native string parser like most other languages.