Have to specify a value two time

Question

I want to make a button that would move, first to the right, then to the left when pressed again.

After a lot of searching, I've been able to make it, but I have to declare it two times. Like, the code won't accept the CSS version.

Here's my code :

HTML

 <div id="light"><div id="button"></div></div>

CSS

padding: 10px;

#light {
    position: relative;
    width: 40px;
    margin: auto;
    background-color: black;
    z-index: 10;
    margin-top: 420px;
    height: 20px;
    border-radius: 40px;
}
#button {
    width: 16px;
    background-color: cornflowerblue;
    height: 16px;
    border-radius: 40px;
    position: relative;
    top: 2px;
    left: 4px;
    cursor: pointer;
    transition: 0.5s;
}

JS

var button = document.getElementById("button");
button.style.left = "4px";
button.onclick = function() {
    if (button.style.left === "4px") {
        button.style.left = "20px";
    } else {
        button.style.left = "4px";
    }  
}

Here's the JSFiddle

If I delete the button.style.left ="4px" declaration from the JS, it wouldn't works because if I do console.log(button.style.left), the result would be nothing.
And that's the thing I don't quite understand there.

Do you want something like that `if (button.style.left === "") { button.style.left = "20px";` you check if the style if defined (no need to force it to be 4px) — Hearner, Nov 09 '20 at 08:47

Shiverz · Answer 1 · 2020-11-09T08:58:48.247

0

"element.style" returns the inline style, but not the computed css.

Instead, you want to use : window.getComputedStyle()

var button = document.getElementById("button");



            button.onclick = function() {
                if (window.getComputedStyle(button, null).getPropertyValue('left') === "4px") {
                    button.style.left = "20px";
                } else {
                    button.style.left = "4px";
                }  
            }

Working JSFiddle here

edited Nov 09 '20 at 08:58

answered Nov 09 '20 at 08:52

Shiverz

663
1
8
23

Ok, i though i could get the value from the css by there :/ – SarahC Nov 09 '20 at 08:58

Rickard Elimää · Answer 2 · 2020-11-09T08:59:20.577

a) You should not use style, but instead use a class that you can toggle.

button.classList.toggle("to-right")

b) You should never do a transition over all values, but specify each value that you want to animate. Otherwise, CSS will loop through all animatable values, which can take time.

transition: 0.5s left

c) You should add the click listener on the #light container, not in the actual button, to achieve better accessibility. (Not implemented in code below)

var button = document.getElementById("button");


button.onclick = function() {
  button.classList.toggle("to-right")  /* == a == */
}

#light {
    position: relative;
    width: 40px;
    margin: auto;
    background-color: black;
    z-index: 10;
    /* margin-top: 420px;*/ 
    height: 20px;
    border-radius: 40px;
}
#button {
    width: 16px;
    background-color: cornflowerblue;
    height: 16px;
    border-radius: 40px;
    position: relative;
    top: 2px;
    left: 5px;
    cursor: pointer;
    transition: 0.5s left;  /* == b == */
}

#button.to-right { /* == a == */
  left: 20px;
}

 <div id="light"><div id="button"></div></div>

Have to specify a value two time

2 Answers2