Box-Shadow on image function not working

Can't wrap my head around this one, why does the onclick function on the image not drop a shadow each time you click? Can you help please, i'm a self learning programmer, would appreciate it. (Look at my Javascript file).

The end Result should be like this https://jenniferdewalt.com/more_drop_shadow.html but she wrote it in jQuery and i don't know this framework yet

CODE

    
    var newBlur = 0;
    var newSpread = 0;

document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    console.log(myShadow);
}

function genShadow() {
    var arr = [0, 0, newBlur, newSpread,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<form>
<input id="testButton"type="button" value="Test"/>
</form>
<div id="blueTop"></div>
<img id="catIMG" src="./more_grumpy_shadow.png"/>
<h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
<h5>- Colonial proverb</h5>

Solution

Problem is in this line:

var newShadow = '"' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + 'Black' + '"' ;

You are adding extra quotes.

// JavaScript source code

var newBlur = 2;
var newSpread = 2;



//functions
document.getElementById("catIMG").addEventListener("click", shadowIMG);

function shadowIMG() {
    var myShadow = genShadow();
    document.getElementById("catIMG").style.boxShadow = myShadow;
    debugger;
    console.log(myShadow);
}

function genShadow() {
    var arr = [10, 10, 10, 10,];
    newBlur +=1;
    newSpread +=5;
    var newShadow = '' + arr[0] + 'px ' + arr[1] + 'px ' + arr[2] + 'px ' + arr[3] + 'px ' + ' black' + '' ;
    console.log(newShadow);
    return newShadow;
}

body
{
    margin: 0;
    background-color: lightgrey;
}

input {
    position: absolute;
    left: 10%;
    width: 100px;
    height: 50px;
    font-size: 20px;
    color: white;
    background-color: green;
}

#blueTop {
    font-size: 30px;
    font-family: Arial;
    width: 100%;
    height: 100px;
    background-color: mediumpurple;
}


#catIMG {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translate(-50%);
    width: 750px;
    height: 500px;
    cursor: pointer;

}

#catText {
    position: absolute;
    left: 50%;
    top: 800px;
    transform: translate(-50%);
    width: 750px;
    text-align: center;
    font-size: 50px;
    font-weight: 100;
    color: rgb(50,20,0);
    cursor: pointer;
}

h5 {
    position: absolute;
    left: 50%;
    top: 1000px;
    transform: translate(-50%);
    font-size: 25px;
    cursor: pointer;
}

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <form>
            <input id="testButton"type="button" value="Test"/>
        </form>
        <div id="blueTop"></div>
            <img id="catIMG" src=""/>
            <h1 id="catText">"You will always be lucky if you know how to make friends with strange cats."</h1>
            <h5>- Colonial proverb</h5>

    </body>
    </html>