Question

I have a box that previews a Box Shadow. The user types in the inputs for the lenghts, blur, spread and colour (hex). So far I have this for the output of the style but it obviously doesn’t work.

document.getElementById('jj_preview3').style["boxShadow"] = jj_input6 + 'px' + jj_input7 + 'px' + jj_input8 + 'px' + jj_input9 + '#' + jj_input10;

• jj_input6 = Horizontal Length
• jj_input7 = Vertical Length
• jj_input8 = Blue Radius
• jj_input9 = Spread
• jj_input10 = Shadow Colour

What changes do I have to make the the javascript code snippet above to make it work?

Answer 1

It should work if you put in spaces. You’re also missing ‘px’ in the last string literal.

document.getElementById('jj_preview3').style['boxShadow'] = jj_input6 + 'px ' + 
    jj_input7 + 'px ' + jj_input8 + 'px ' + jj_input9 + 'px #' + jj_input10;