Hey everyone, I'm struggling to understand why the onclick function on the image is not generating a drop shadow every time you click. Could someone please lend a hand? I am teaching myself how to program and any help would be greatly appreciated. (Please take a look at my Javascript file).
I'd like the final result to resemble this , but Jennifer wrote it in jQuery which I haven't learned yet.
MY 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>