Clicking button to move image to right has no effect

[StevenHu]

I am trying to change the style of the image to move it to the right. Clicking a button should alter the left style from a left=-275 with this snippet: document.getElementById(‘slider’).style.left=‘580px’;

I have the image styled like this to position it about halfway to the left of the div:

<style type="text/css">
    #slider {
    width:572px; 
    float:left; 
    position:relative;
    left:-275px;
    top:0;
    }
</style>

The image has been coded as:

<section id="contentleft">
    <article id="article1">
        <input type="button" onClick="move_img1('left')" value="<=="><input type="button" onClick="move_img2('right')" value="==>">
<br>
        <img id="slider" data-src="images/top-down.jpg" alt="top view">
    </article>
</section>

The JS function follows:

<script>
    /* http://www.plus2net.com/javascript_tutorial/image-position-demo.php */
    function move_img1('left') {
        document.getElementById('slider').style.left='-275px';
    }
    function move_img2('right') {
        document.getElementById('slider').style.left='580px';
    }
</script>

Right now, the image stays in the left position and the right button does not move it. Any ideas of what is wrong?

[StevenHu]

I updated the code. There are no errors in Console with this, and I think it is more correct JS. JavaScript:

>     <script>
>         /* http://www.plus2net.com/javascript_tutorial/image-position-demo.php */
>         function move_img1() {
>             var element = document.getElementById('slider');
>             element.style.left = parseInt(element.style.left) - 275 + 'px';
>         }
>         function move_img2() {
>             var element = document.getElementById('slider');
>             element.style.left = parseInt(element.style.left) - 580 + 'px';
>         }
>     </script>

HTML:

>     <section id="contentleft">
>             <article id="article1" style="overflow:hidden;">
>                 <div class="button" onClick="move_img2()" style="width:100px; float:right;">==></div>
>                 <div class="button" onClick="move_img1()"  style="width:100px; float:right;"><==</div>
>                 <br>
>                 <img id="slider" data-src="images/top-down.jpg" alt="top view" title="top view">
>             </article>
>     </section>

[StevenHu]

I finally got it working:

// right
        function move_img2() {
            var R = 100;
            var element = document.getElementById('slider');
                element.style.left = R + 'px'; 
        }
// left
        function move_img1() {
            var R = -275;
            var element = document.getElementById('slider');
                element.style.left = R + 'px'; 
        }