Changing CSS property "left" with JS doesn't work

Question

I've got a problem with my JS code, I would like to change the CSS property "left" of an element. I'm not sure what's to exact problem. I'm pretty new to JS. The following code shows my CSS as well as my JS code.

CSS:

#Slider_Cont_Section 
{ 
    left: 0;
}

JavaScript:

<script type="text/javascript">
function FunzioneSliderLeft() 
{
var left = document.getElementById("Slider_Cont_Section").style.left;
if ( left = "0px") 
{
    left = "0px";   
}
else if ( left = "-1280px") 
{
    left = "0px";
}
else if ( left = "-2560px") 
{
    left = "-1280px";
}
else 
{
    left="-2560px"; 
}
</script>




 <script type="text/javascript">

function FunzioneSliderRight() 
{ 
    var left = document.getElementById("Slider_Cont_Section").style.left;

    if ( left = "0px") 
    {
        left = "-1280px";   
    }

    else if ( left = "-1280px") 
    {
        left = "-2560px";
    }
    else if ( left = "-2560px") 
    {
        left = "-3840px";
    }
    else 
    {
        left="0px"; 
    }
</script>

"not work" is not enough explanation. Please provide information on exactly what you are trying to do and what exactly goes wrong. Are there any errors? — Lix, Sep 03 '14 at 09:23
Also please try to create more meaningful titles for your posts. — Lix, Sep 03 '14 at 09:24

score 0 · Accepted Answer · edited May 23 '17 at 12:21

Here is your corrected code:

compare with "==" or "===" instead of just "=".

"=" is for allocation.
"==" is for checking if it's the same value.
"===" is for checking same value and same type.

Here are more information about it.

You also have to set the style again, otherwise you only change the variable.

function FunzioneSliderLeft() {

var left = document.getElementById("Slider_Cont_Section").style.left;

if ( left == "0px") {
    return;   }
if ( left == "-1280px") {
     left = "0px";}
else if ( left == "-2560px") {
     left = "-1280px";}
else {
     left="-2560px"; }
document.getElementByID("Slider_Cont_Section").style.left = left;
}
function FunzioneSliderRight() { 

var left = document.getElementById("Slider_Cont_Section").style.left;

if ( left == "0px") {
    left = "-1280px";   }
else if ( left == "-1280px") {
     left = "-2560px";}
else if ( left == "-2560px") {
     left = "-3840px";}
else {
      left="0px"; }
document.getElementByID("Slider_Cont_Section").style.left = left;
}

Instead of checking so many values, you could use the switch command. To improve your code even further you could use the JQuery framework.

function FunzioneSliderLeft() {

var left = $("#Slider_Cont_Section").css("left");

switch(left) {
    case "0px":
        return;
        break; //for the Validator
    case "-1280px":
        left = "0px";
        break;
    case "-2560px":
        left = "-1280px";
        break;
    default:
        left = "-2560px";
}

$("#Slider_Cont_Section").css("left") = left;

function FunzioneSliderRight() { 

var left = $("#Slider_Cont_Section").css("left");

switch(left) {
    case "0px":
        left = "-1280px";
        break; 
    case "-1280px":
        left = "-2560px";
        break;
    case "-2560px":
        left = "-3840px";
        break;
    default:
        left = "0px";
}

$("#Slider_Cont_Section").css("left") = left;
}

Even though this looks better than your code, there are plenty of improvement. It would be great it you tell us, what you want to achiece exactly.

now the fuction work...thx ùfor all :-D – Alessandro Rizzuti Sep 03 '14 at 15:51 — Alessandro Rizzuti, Sep 03 '14 at 15:51

score 0 · Answer 2 · answered Sep 03 '14 at 09:36

im not sure if this is going to fix your problem but your expressions:

if (left = "0px")

are actually assignments. Expressions are written with "==" like this:

if (left == "0px")

I hope this solves your Problem :)

EDIT: it doesnt solve the Problem. But just keep it in mind :)

Changing CSS property "left" with JS doesn't work

2 Answers2