Warum wird Stil eingefügt, wenn die Anweisung nicht funktioniert?

Question

Ich versuche, eine grundlegende Toggle Klicken mit js zu tun ... Ich habe diese

<div id="box"></div> 
<button id="btn"></button> 

#box { 
    background: black; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    left: 50px; 
} 

js:

var btn = document.getElementById('btn'); 
var box = document.getElementById('box'); 

btn.addEventListener('click', function(){ 

    if (box.style.left === '50px') { 
    box.style.left = '200px'; 
    } 

    if (box.style.left === '200px') { 
    box.style.left = '50px'; 
    } 

}); 

ich es nachgeschlagen und das scheint die Methode alle zu sein verwendet für toggle click mit pure js so habe ich keine ahnung warum es bei mir nicht funktioniert, irgendwelche ideen?

Answer 1

@ Dekels Antwort erklärt bereits, was mit Ihrem Code falsch war. Sie sollten jedoch stattdessen mit Klassen arbeiten. Nicht nur ist diese Art und Weise schneller als window.getComputedStyle abrufen, es ist auch viel einfacher

var btn = document.getElementById('btn'); 
 
btn.addEventListener('click', function() { 
 
    var box = document.getElementById('box'); 
 
    box.classList.toggle('left-50'); 
 
    box.classList.toggle('left-200'); 
 
});

.left-50 { 
 
    left: 50px; 
 
} 
 

 
.left-200 { 
 
    left: 200px; 
 
} 
 

 
#box { 
 
    background: black; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
}

<div id="box" class="left-50"></div> 
 
<button id="btn">bt</button>

Answer 2

1. Sie sollten die window.getComputedStyle stattdessen verwenden (diese Weise können Sie den aktuellen Wert des Stils erhalten, die auf dieses Element angewendet wird, und zwar nicht nur, was auf dem style Attribut ist) ..
2. Du eine else fehlen würde (sonst erhalten Sie immer die zwei if und nichts wird sich ändern)

var btn = document.getElementById('btn'); 
 
var box = document.getElementById('box'); 
 

 
btn.addEventListener('click', function(){ 
 
    if (window.getComputedStyle(box).left === '50px') { 
 
    box.style.left = '200px'; 
 
    } else if (window.getComputedStyle(box).left === '200px') { 
 
    box.style.left = '50px'; 
 
    } 
 

 
});

#box { 
 
    background: black; 
 
    width: 50px; 
 
    height: 50px; 
 
    position: absolute; 
 
    left: 50px; 
 
}

<div id="box"></div> 
 
<button id="btn"></button>

Answer 3

Besser Offset verwenden. Außerdem macht man hier eine Art Toggle-Operation. In der Zwischenzeit habe ich Ihr Skript geändert, damit es funktioniert:

<div id="box"></div> 
<input type="button" id="btn" value=" Try it "> 
<style> 
#box { 
    background: black; 
    width: 50px; 
    height: 50px; 
    position: absolute; 
    left: 50px; 
} 

</style> 

<script> 
var btn = document.getElementById('btn'); 
var box = document.getElementById('box'); 

btn.addEventListener('click', function(){ 


    if (box.offsetLeft == 50) { 
     box.style.left = 200 ; 

    } 
    else if (box.offsetLeft == 200) { 
     box.style.left = 50; 

    } 


}); 
</script>