Change a text-shadow style in HTML using JavaScript

Question

I am using multiple sliders to get the rgba values for a text-shadow. But I can't make it assign those values to change the text-shadow style.

<h1 id="myHeader" style ="text-shadow: 5px 5px 3px #FF00FF">Hello World!</h1>

My JavaScript code looks like this:

<script>        
        function changeColor() 
        {
            var op = document.getElementById('Opacity').value;
            var red = document.getElementById('Rosu').value;
            var green = document.getElementById('Albastru').value;
            var blue = document.getElementById('Verde').value;'
            var color = 'rgba(' + red +',' + blue + ',' + green + ',' + op/100 + ')';

            document.getElementById('myHeader').style = 'text-shadow: 5px 5px 3px ' + color;

        }

        document.getElementById('Opacity').addEventListener('input', changeColor); 
        document.getElementById('Rosu').addEventListener('input', changeColor); 
        document.getElementById('Albastru').addEventListener('input', changeColor); 
        document.getElementById('Verde').addEventListener('input', changeColor); 


</script>

There is a dangling `'` at the end of this line `var blue = document.getElementById('Verde').value;'` And where is the rest of the HTML ? — laruiss, May 19 '20 at 10:01
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — Emiel Zuurbier, May 19 '20 at 10:02

score 0 · Answer 1 · answered May 19 '20 at 10:05

You code is correct, but you have a single quote to remove after document.getElementById('Verde').value;

You can also use style.textShadow, here is an example:

var color="#00ff00";
document.getElementById('btn').onclick = function(){
    document.getElementById('myHeader').style.textShadow = '5px 5px 30px ' + color;
};

<h1 id="myHeader" style ="text-shadow: 5px 5px 3px #FF00FF">Hello World!</h1>
<button id='btn'>Change shadow</button>

laruiss · Answer 2 · 2020-05-19T10:18:22.640

Here is a completely functional code (not optimized, though):

<h1 id="myHeader" style="text-shadow: 5px 5px 3px #FF00FF">Hello World!</h1>

<p>
    <label for="opacity">Opacity</label>
    <input type="text" name="opacity" id="opacity" placeholder="Opacity" value="1">
</p>
<p>
    <label for="rosu">Rosu</label>
    <input type="text" name="rosu" id="rosu" placeholder="Rosu" value="1">
</p>
<p>
    <label for="albastru">Albastru</label>
    <input type="text" name="albastru" id="albastru" placeholder="Albastru" value="1">
</p>
<p>
    <label for="verde">Verde</label>
    <input type="text" name="verde" id="verde" placeholder="Verde" value="1">
</p>

<script>
    function changeColor() {
        var op = document.getElementById('opacity').value;
        var red = document.getElementById('rosu').value;
        var green = document.getElementById('albastru').value;
        var blue = document.getElementById('verde').value;
        var color = 'rgba(' + red + ',' + blue + ',' + green + ',' + op / 100 + ')';

        document.getElementById('myHeader').style.textShadow = '5px 5px 3px ' + color;
    }

    document.getElementById('opacity').addEventListener('input', changeColor);
    document.getElementById('rosu').addEventListener('input', changeColor);
    document.getElementById('albastru').addEventListener('input', changeColor);
    document.getElementById('verde').addEventListener('input', changeColor);
</script>

Demo here on jsfiddle

score -1 · Answer 3 · answered May 19 '20 at 10:00

-1

Need to use camelCase instead of kebab-case if you are updating CSS attribute using javascript.

Use document.getElementById('myHeader').style.textShadow = '5px 5px 3px ' + color;

answered May 19 '20 at 10:00

Vaibhav

1,412
1
10
14

Change a text-shadow style in HTML using JavaScript

3 Answers3