Почему right работает некорректно?

Question

L-RES выполняется один раз, R-RES выполняется бесконечно как и должно быть. L и R по своему коду практически идентичны Второй день уже голову ломаю, ну где ошибка?

$button_left = document.querySelector('#button_left')
$button_right = document.querySelector('#button_right')
$button_reset = document.querySelector('#button_reset')
$parent = document.querySelector('#parent')


$button_left.addEventListener('click', function(){
    $parent.style.right = 0 
    $parent.style.right = 200 + 'px'
})

$button_right.addEventListener('click', function(){
    $parent.style.left = 0
    $parent.style.left = 200 + 'px'
})

$button_reset.addEventListener('click', function(){
    $parent.style.left = 0
    $parent.style.right = 0 
})

*{margin: 0;}

#button_left{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 500px;
    top: 10px;
    font-size: 2rem;
}
#button_right{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 600px;
    top: 10px;
    font-size: 2rem;
}
#button_reset{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 700px;
    top: 10px;
    font-size: 2rem;
}
#parent{
    background-color: grey;
    width: 600px;
    height: 210px;
    position: relative;
}
#box_1{
    background-color: brown;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
}
#box_2{
    background-color: gold;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
    left: 200px;
}
#box_3{
    background-color: chartreuse;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
    left: 400px;
}

        <div id="parent">
            <div id="box_1"></div>
            <div id="box_2"></div>
            <div id="box_3"></div>
        **</div>
        <button id="button_left">L</button>
        <button id="button_right">R</button>
        <button id="button_reset">RES</button>

**

Answer 1

У вас возникает ситуация когда к элементу с фикс. шириной применяется и left и right. В таком случае применяется только одно из свойтсв. Решение: всякий раз при установке горизонтального позиционирования убирать противоположное свойство:

$button_left = document.querySelector('#button_left')
$button_right = document.querySelector('#button_right')
$button_reset = document.querySelector('#button_reset')
$parent = document.querySelector('#parent')


$button_left.addEventListener('click', function(){
    $parent.style.left = '';
    $parent.style.right = 200 + 'px'
})

$button_right.addEventListener('click', function(){
    $parent.style.right = '';
    $parent.style.left = 200 + 'px'
})

$button_reset.addEventListener('click', function(){
    $parent.style.left = '';
    $parent.style.right = '';
})

*{margin: 0;}

#button_left{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 500px;
    top: 10px;
    font-size: 2rem;
}
#button_right{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 600px;
    top: 10px;
    font-size: 2rem;
}
#button_reset{
    position: absolute;
    width: 100px;
    height: 50px;
    left: 700px;
    top: 10px;
    font-size: 2rem;
}
#parent{
    background-color: grey;
    width: 600px;
    height: 210px;
    position: relative;
}
#box_1{
    background-color: brown;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
}
#box_2{
    background-color: gold;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
    left: 200px;
}
#box_3{
    background-color: chartreuse;
    width: 200px;
    height: 200px;
    display: inline-block;
    position: absolute;
    left: 400px;
}

<div id="parent">
            <div id="box_1"></div>
            <div id="box_2"></div>
            <div id="box_3"></div>
        **</div>
        <button id="button_left">L</button>
        <button id="button_right">R</button>
        <button id="button_reset">RES</button>

БЛОГ НА HUSL

Почему right работает некорректно?

Ответы (1 шт):