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

Question

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.

I don't see a usage of classList.add in your snippet

Taplar
– Taplar

2020-07-08 22:31:11 +00:00
Commented Jul 8, 2020 at 22:31 — Taplar
– Taplar, Commented Jul 8, 2020 at 22:31

blex · Accepted Answer · 2020-07-08 22:40:21Z

1

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;
}

answered Jul 8, 2020 at 22:40

blex

25.7k6 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ri20 Over a year ago

Ah I see I don't know why my version didn't work even though I tried it like that the first time but thank you so much I appreciate it

Bren · Accepted Answer · 2020-07-08 22:49:17Z

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;
}

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related