how to move div to left on every click - just javascript no jquery

Question

I am trying to build a slide show from scratch. I want to use only javascript, no jquery.

As of now, when I click on the 'prev' button, it only moves 50px to left just once. How do I make it move 50px every time on click of 'prev' button.

Javascript Code :-

function prev() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left - 50;
}

function nxt() {
    document.getElementById('slide').style.left = document.getElementById('slide').style.left + 50;
}

HTML :-

<div class="slideshow-wrapper">
    <h1>Slide Show</h1>
    <div class="slideshow-outside-container">
        <div class="slideshow-inner-container" id="slide">
            <ul>
                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>

                <li class="slide slide1"></li>
                <li class="slide slide2"></li>
                <li class="slide slide3"></li>
                <li class="slide slide4"></li>
                <li class="slide slide5"></li>
            </ul>
        </div>
    </div>

    <div class="slideshow-controls-wrapper">
        <button onclick="prev()" class="prev">Prev</button>
        <button onclick="nxt()" class="nxt">Next</button>
    </div>
</div>

CSS:-

body{
font-family: 'tahoma', sans-serif;
font-size: 14px;
color: #999999;
background-color: #cccccc;
}

ul{
margin: 0;
padding: 0;
list-style-type: none;
}
ul li{
padding: 0;
display: block;
}

.slideshow-wrapper{
position: relative;
width: 100%;
text-align: center;
}
.slideshow-outside-container h1{
margin-bottom: 30px;
}
.slideshow-outside-container{
position: relative;
display: block;
margin: 0 auto;
padding: 10px;
width: 80%;
height: 150px;
background-color: #ffffff;
overflow: hidden;
}
.slideshow-inner-container{
position: absolute;
top: 12px;
left: 0;
width: 1920px;
height: 140px;
border: 1px solid #000000;
}
.slide{
float: left;
width: 150px;
height: 140px;
margin-right: 20px;
background-color: #eeeeee;
}

.slide1{
background-color: green;
}

.slide2{
background-color: yellow;
}

.slide3{
background-color: red;
}

.slide4{
background-color: blue;
}

.slide5{
background-color: orange;
}

.slideshow-controls-wrapper button{
display: inline-block;
cursor: pointer;
padding: 20px;
}

Answer 1

Your first problem is that the slide element does not have a current value for left, so even parsing it will return NaN and not work. You can parseInt the current value (50px parses to 50), but default it to 0 using ||, then +/- 50.

When you set the value you also need to say which units it is in, in your case 'px'.

You could cache the value in a variable as some people have suggested, but I don't really see the need. Parsing it each time is quick enough, ensures the function does what it is meant to each time and you don't run the risk of the stored value getting out of sync.

function prev() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) - 50;
    document.getElementById('slide').style.left = val + 'px';
}

function nxt() {
    var val = (parseInt(document.getElementById('slide').style.left, 10) || 0) + 50;
    document.getElementById('slide').style.left = val + 'px';
}

Fiddle here