JS new Image() doesnt get css class

Question

Hey guys i'm currently working on a small game and i've been trying to use css to flip horizontally an image like so:

JS

sprite = new Image(13, 32);
sprite.src = w1.png;// stored locally i know but i dont intend to sell this:)
if (player.velX < 0) {
  sprite.setAttribute("class", "flip")

  if (player.velX > 0) {
    sprite.removeAttribute("class", "flip")

CSS

.flip {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

so is the problem the fact that i'm creating the img element in JS ?

(btw i use functions to change the sprite's src somewhere else in the code is that the problem ? (do you need some of that code too ?)

yes my update function uses requestanimationframe and in that i draw the player (i can see the player just not flip it when it goes left) — pool matho, Oct 25 '16 at 20:43
Also, in your if statement, what should happen if player.velx is 0? — David Thomas, Oct 25 '16 at 20:43
@Bálint Or didn't open them `{`... believe either removing the opening bracket **or** adding a closing one would work. — Tyler Roper, Oct 25 '16 at 20:43
@poolmatho How are you drawing it? Have you [checked your console?](http://stackoverflow.com/help) The code you posted should be giving you an error. — Mike Cluck, Oct 25 '16 at 20:43
You probably wanted to quote the image source, seeing as it is a string — adeneo, Oct 25 '16 at 20:45
here's a jsfiddle (wont work since pictures are stored locally but you can see the full code) @Bálint i did close them in the full code just missed it here @ David Thomas nothing i think i just need the player to face the last direction it was headed towards — pool matho, Oct 25 '16 at 20:46
And `removeAttribute` takes one argument, the attribute to be remove — adeneo, Oct 25 '16 at 20:46
So I was looking at your code and I noticed you're drawing the sprite using the canvas API (which is a good idea). The problem is you can't apply CSS to images you draw to the canvas. Check out [this question](http://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5) to learn how to flip things in the canvas. — Mike Cluck, Oct 25 '16 at 20:55

Bálint · Accepted Answer · 2016-10-25T20:53:28.997

1

Based on the indentation and bracket placement of your code, this is currently what's it doing:

if the velocity is less than 0 then
    add the flip attribute to the image

    if the velocity is more than 0 then // This can't happen
        remove the flip attrbiute from the image
    endif
endif

You probably wanted to put both of them on the same level like:

if the velocity is less than 0 then
    ...
endif

if the velocity is more than 0 then
    ...
endif

In JS this is:

if (player.velX < 0) {
    sprite.classList.add("flip"); // Use classList.add instead of setAttribute
    // There's no real reason to this, except that it was specifically designed
    // for this. You wouldn't use a pencil to dig a hole in a wall, right?
}

if (player.velX > 0) {
    sprite.classList.remove("flip"); // Same reason as above
}

edited Oct 25 '16 at 20:53

answered Oct 25 '16 at 20:48

Bálint

4,009
2
16
27

it was actually inside an if/else if at first (sorry i lost that code and tried to quote it from memory) – pool matho Oct 25 '16 at 20:49
@War10ck I made this so it's easier to understand (because it's english) for a beginner programmer, but ok, I include a js snippet – Bálint Oct 25 '16 at 20:50
ok i'll try this be right back EDIT: Tried it, still no noticeable change, i added it to the end of the update function, the same code, is the problem the fact that sprite.src is modified by the code ? (tried it outside the update too) – pool matho Oct 25 '16 at 20:54
wow haha actually this is much more simple : So I was looking at your code and I noticed you're drawing the sprite using the canvas API (which is a good idea). The problem is you can't apply CSS to images you draw to the canvas. Check out this question to learn how to flip things in the canvas. – Mike C but still thanks for the answers :) – pool matho Oct 25 '16 at 21:02
@poolmatho You probably wanted to post that to somewhere else – Bálint Oct 25 '16 at 21:04

score 0 · Answer 2 · answered Oct 25 '16 at 20:45

0

Use sprite.classList.add('flip') or sprite.classList.remove('flip') rather than changing the class attribute on the element.

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

answered Oct 25 '16 at 20:45

Corvae

308
1
10

JS new Image() doesnt get css class

2 Answers2