CODEWITHSUNDEEP
javascripthtmlcssweb
ri20
ri20

Reputation: 95

How do i add a class to style my javascript in css classlist.add not working

Im struggling to add a class to my javascript script (I want to animate my images that are created in javascript to fall off the page) I have used the code element.classList.add("mystyle"); but wherever I place it my javascript no longer works.

The only way I have been able to style the javascript images have been to use *img { in css which is not ideal.

my code used within 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>

The code is to place random images wherever the user clicks on screen.

Upvotes: 0

Views: 765

Answers (2)

Bren
Bren

Reputation: 615

Here's a more elegant solution:

const pictures = [
  "/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"
];  

function showCoords(event) {
  var randomNum = Math.floor(Math.random() * pictures.length); 
  var element = document.createElement("img");
  
  element.src = pictures[randomNum];
  element.style.cssText = `top: ${event.clientY}px; left: ${event.clientX}px;`;
  
  document.querySelector('body').append(element);
}

document.addEventListener('click', showCoords);
img {
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
  z-index: -2;
  width: 360px;
  height: auto;
  position: fixed;
}

Upvotes: 1

blex
blex

Reputation: 25634

It works fine if you add the class. Try the live demo below, is this what you want?

var myPix = ["https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Whatsapp-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Instagram-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Youtube-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Facebook-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Twitter-128.png", "https://cdn4.iconfinder.com/data/icons/social-media-2210/24/Dribbble-128.png"];

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.classList.add('mystyle');

  yourImage.style.left = event.clientX + "px";
  yourImage.style.top = event.clientY + "px";

  document.body.appendChild(yourImage);
}
.mystyle {
  border-radius: 20px;
  box-shadow: 0px 0px 10px 0 rgba(0, 0, 0, 0.3);
  width: 60px; margin-left: -30px;
  height: 60px; margin-top: -30px;
  position: fixed;
}

Upvotes: 1

Related Questions