JavaScript JS code not working

[Johna]

Hi all,
I have this piece of JS code, but it's not working, any idea why.
Or have I made some very obvious error in the code?

let sm = document.getElementById("sliderMain");
let ll = document.getElementById("sliderLL");
let l = document.getElementById("sliderL");
let m = document.getElementById("sliderM");
let r = document.getElementById("sliderR");
let rr = document.getElementById("sliderRR");

let ael = addEventListener;
let bgp = style.backgroundPosistion;
let aps = style.animationPlayState;

document.getElementById("btn").ael("click", function() {
  if (ll.bgp === 2000) {
    ll.bgp = 1000;
    l.bgp = 0;
    m.bgp = -1000;
    r.bgp = -2000;
    rr.bgp = -3000;
  }
  else if (ll.bgp === 1000) {
    ll.bgp = 0;
    l.bgp = -1000;
    m.bgp = -2000;
    r.bgp = -3000;
    rr.bgp = -4000;
  }
  else if (ll.bgp === 0) {
    ll.bgp = -1000;
    l.bgp = -2000;
    m.bgp = -3000;
    r.bgp = -4000;
    rr.bgp = -5000;
  }
  else if (ll.bgp === -1000) {
    ll.bgp = -1000;
    l.bgp = -2000;
    m.bgp = -3000;
    r.bgp = -4000;
    rr.bgp = 1000;
  }
});

I'm not sure if you want to see HTML or CSS?

 

[EkBass]

Use es6 and it works. Not sure do i want to see the html

 

[Johna]

Use es6 and it works.

What's that? A JS library like jQuery?

 

[EkBass]

Im not sure anymore were you joking (as i assumed) or are you serious...

 

[Johna]

Im not sure anymore were you joking (as i assumed) or are you serious...

You mean if the thread was a joke?

 

[EkBass]

Yep. Cant find error from that code, except that let works after es6. So i thought you are kidding or something.

 

[Johna]

Well it doesn't work for me, I've tried changing let to var, but it still doesn't work

 

[EkBass]

Code itself seems to be ok, so it must be in logics somehow, or maybe mispelled id-name. Show some more, maybe we can dig it out.

 

[Johna]

That's all the JS I have, but here's the HTML and CSS.

This is my HTML:

<link rel="stylesheet" href="style.css">

<div id="sliderMain">
  <div id="sliderLL" class="st2"></div>
  <div id="sliderL" class="st1"></div>
  <a href="#" style="cursor: default;"><div id="sliderM" class="st0"></div></a>
  <div id="sliderR" class="st4"></div>
  <div id="sliderRR" class="st3"></div>
</div>
<button id="btn">Click Me</button>

<script src="script.js" charset="utf-8"></script>

And this is my CSS:

#sliderMain {
  margin: 0px;
  padding: 0px;
  width: 5000px;
  background-color: #262626;
  overflow: hidden;
  margin-left: calc(50vw - 2500px);
}

#sliderLL,
#sliderL,
#sliderM,
#sliderR,
#sliderRR {
  width: 1000px;
  height: 468px;
  float: left;
  background-image: url(../images/ISC.png);
  background-repeat: repeat;
  transition: 0.5s;
  opacity: 0.7;
}

#sliderLL:hover,
#sliderL:hover,
#sliderR:hover,
#sliderRR:hover {
  transition: 0.5s;
  opacity: 0.85;
}


#sliderLL {
  background-position: 2000px;
}

#sliderL {
  background-position: 1000px;
}

#sliderM {
  background-position: 0;
  opacity: 1 !important;
}
#sliderR {
  background-position: 4000px;
}

#sliderRR {
  background-position: 3000px;
}

 

[Deleted member 2829]

You say your JS code "does not work". Can you be more specific ?
Is that click event handler code even called ? Put an alert() in it to make sure.

I have doubts about this code (regardless whether you use var or let)

let ael = addEventListener;
let bgp = style.backgroundPosistion;
let aps = style.animationPlayState;

Is this possible at all ? It smacks of C #define which must be evaluated by preprocessor. I don't think
JS works like that. It might just all get ignored. Or perhaps there's errors - have you checked the debugger console log ?

Even if this does work, you need to correct the typo, i.e. remove the second s from backgroundPosistion 😁

 

[Johna]

Is this possible at all ? It smacks of C #define which must be evaluated by preprocessor. I don't think
JS works like that. It might just all get ignored. Or perhaps there's errors - have you checked the debugger console log ?

Yeah I think that's the problem, I guess I'll have to type style.backgroundPosition; every time I use it.
Thanks

 

[Deleted member 2829]

It was a nice try though ! I thought for a while you'd been a C programmer 😁
I'd still be interested in the console output caused by your statements.

 

[Johna]

I'd still be interested in the console output caused by your statements.

Uncaught ReferenceError: style is not defined
    <anonymous> file:///C:/Users/***/Documents/***/***/Website/slider-buttons/New folder/script.js:9
script.js:9:11
    <anonymous> file:///C:/Users/***/Documents/***/***/Website/slider-buttons/New folder/script.js:9

 

[Deleted member 2829]

Well that explains why your idea didn't work ! Although that could also have been caused by the spurious 's' for all I know.
Either way, whenever some JS doesn't work your first task is to check the console log.

 

[Johna]

Either way, whenever some JS doesn't work your first task is to check the console log.

Yeah, I guess I'll do that next time, thanks.