JavaScript class name modifications are not functioning as expected

Question

JavaScript class name modifications are not functioning as expected

Testing a sprite sheet on a small web page I created. The code for each sprite in sprites.css is structured like this...

.a320_0 {
   top: 0px;
   left: 0px;
   width: 60px;
   height: 64px;
   background: url("images/sprites.png") no-repeat -787px -398px;
}

The layout of my test page is as follows...

var i = 0

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById('image').className = "a320_" + hdg;
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000)
}
imageChange()

<div id='imageContainer'>
  <div id='image'></div>
</div>

Verified that the class name changes during the loop and matches classes in my style sheet. Both sprites.css and sprites.png are located in the images folder within the same directory as my page.

When directly applying a rule from the style sheet to the page with #image, I can display the specific image, confirming correct sprite coordinates. However, placing the styles into the actual css file or using .className = does not yield the expected result. Previously functional setup now encountering issues, seeking assistance...

javascript css

Answer 1

Answer №1

Make sure to use

document.getElementById("image").classList.add("a320_" + hdg);

.

var x = 0;

function changeImage() {
  setTimeout(function() {
    var hdg = x * 15;
    document.getElementById("image").classList.add("a320_" + hdg);
    x++;
    if (x < 24) {
      changeImage();
    }
  }, 1000);
}

changeImage();

.a320_0 {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 64px;
  background: url("https://source.unsplash.com/random") no-repeat -787px -398px;
}

<div id='imageContainer'>
  <div id='image'></div>
</div>

Check it out on Codepen

Answer 2

Make sure to use

document.getElementById("image").classList.add("a320_" + hdg);

.

var x = 0;

function changeImage() {
  setTimeout(function() {
    var hdg = x * 15;
    document.getElementById("image").classList.add("a320_" + hdg);
    x++;
    if (x < 24) {
      changeImage();
    }
  }, 1000);
}

changeImage();

.a320_0 {
  top: 0px;
  left: 0px;
  width: 60px;
  height: 64px;
  background: url("https://source.unsplash.com/random") no-repeat -787px -398px;
}

<div id='imageContainer'>
  <div id='image'></div>
</div>

Check it out on Codepen

Answer 3

Answer №2

Although your script appears to be accurate, there seems to be a significant syntax error causing it to not produce the intended outcome.

When applying a class name to an HTML element using JavaScript, the correct syntax is as follows:

selector.property.action("property value");

For instance, your code should look like this:

document.getElementById('image').classList.add("a320_" + hdg);

The correction only needs to be made in the javascript section:

var i = 0

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById('image').classList.add("a320_" + hdg);
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000)
}
imageChange()

I trust this information proves beneficial!

Answer 4

Although your script appears to be accurate, there seems to be a significant syntax error causing it to not produce the intended outcome.

When applying a class name to an HTML element using JavaScript, the correct syntax is as follows:

selector.property.action("property value");

For instance, your code should look like this:

document.getElementById('image').classList.add("a320_" + hdg);

The correction only needs to be made in the javascript section:

var i = 0

function imageChange() {
  setTimeout(function() {
    var hdg = i * 15;
    document.getElementById('image').classList.add("a320_" + hdg);
    i++;
    if (i < 24) {
      imageChange();
    }
  }, 1000)
}
imageChange()

I trust this information proves beneficial!

JavaScript class name modifications are not functioning as expected

Answer №1

Answer №2

Similar questions

Issue with AngularJs: $http post only posting single item to collection inside a for loop

Eliminate JSON data that pertains to dates that are either in the past or future

Two sets of buttons, however, one set is carrying out the incorrect function

Change the size of the individual cells within JointJS

Finding the Ideal Location for Controllers in an Express.js Project

Struggles with fading in and out

Strange behavior of dropdown submenu

Is there a way to prioritize the table row background color over the cell input elements background color?

Animated CSS sidemenu (utilized as a filtering panel for a table)

Retrieve the chosen option from a dropdown menu and transfer it to the submit button in PHP

What is the proper way to utilize CSS animation delays in order to design a collapsible HTML container?

Position the image to the right of the dropdown menu in Bootstrap

How come my flex-box navigation bar is not collapsing as I shrink the browser window size?

Implementing dynamic ID routes in React Router using JSON data

The share-modal.js file is throwing an error because it is unable to read properties of null, particularly the 'addEventListener' property, at

Methods for decoding a JSON object and iterating through its contents

Looking to implement pagination in Vue.js - what steps should I take?

Cross-Origin Resource Sharing Problem - Angular version 8 with NodeJS and ExpressJS

It appears that the size of the textlabel in the HTML is not responsive to

Having trouble loading select2 using PHP/Ajax/JSON even though I can see the data in the inspector