I am having trouble adding a class to my JavaScript script in order to animate the images created in JavaScript to fall off the page. I have tried using the code
element.classList.add("mystyle");The only way I have managed to style the JavaScript images is by using *img { in CSS, which is not an ideal solution.
Here is the code used in my HTML:
<script>
var myPix = new Array("/img/portfolio/tiket.jpg","/img/portfolio/30day.jpg", "/img/portfolio/board.jpg", "/img/portfolio/cyanotype.jpg,""/img/portfolio/dissent.jpg,", "/img/portfolio/geoapp.jpg", "/img/portfolio/jailbreak.jpg,""/img/portfolio/gtr.jpg,", "/img/portfolio/eid.jpg")
document.addEventListener("click", showCoords);
function showCoords(event)
{
var randomNum = Math.floor(Math.random() * myPix.length);
var yourImage = document.createElement("img");
yourImage.src = myPix[randomNum] ;
yourImage.style.cssText = " border-radius: 20px; box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3); z-index: -2; width:360px;height:auto;position:fixed;top:" + event.clientY + "px;left:" + event.clientX + "px;";
document.body.appendChild(yourImage);
}
jQuery.fn.reverse = [].reverse;
</script>
This code randomly places images wherever the user clicks on the screen.