angularjs - Moving image display bar left or right with arrow buttons and javascript -

sorry small piece of code, trying scroll image bar left or right 2 arrow buttons in html. error showing "uncaught typeerror: cannot read property 'style' of null @ movingimage" please if can help, let me know.

js:

       function movingimage(el, e) {             var amount = +e.target.dataset.amount;             el.style.left = (el.offsetleft + amount) + 'px';         }          var div = document.getelementbyid("movingimage");         var buttons = document.queryselectorall('button');          [].slice.call(buttons).foreach(function (button) {             button.onclick = movingimage.bind(this, div);         }); 

html:

    <button data-amount="-100"><div class="arrow left small" ng-click="changecolour(index-1)" ng-src="{{colour.thumbmedia | smcmediaurl}}"></div></button>     <button data-amount="100"><div class="arrow right small" ng-click="changecolour(index+1)" ng-src="{{colour.thumbmedia | smcmediaurl}}"></div></button> 

<div id="movingimage>where images go</div>

also atom saying document undefined not sure if problem or not not showing in console.

thank you!!

it's hard tell you're doing, because you're mixing few different things tagged question angularjs question, made quick example of want "angular" approach. have look:

https://jsfiddle.net/26ele0xo/

as can see in code below, there simple controller behind html, , has 1 function, alters value associated scope. when value updated, image's style attribute updates, moving image

var myapp = angular.module('myapp', []);    myapp.controller('myctrl',    function($scope) {        $scope.imgleft = 100;        $scope.moveimage = function(amount) {        $scope.imgleft += amount;      }      }  );

#movingimg img {    position: absolute;    top: 100px;  }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <div ng-app="myapp" id="movingimg">    <div ng-controller="myctrl">      <img ng-style="{'left': imgleft+'px'}" src="http://images2.wikia.nocookie.net/__cb20110811172434/fallingskies/images/f/fd/totoro_normal.gif" />        <button ng-click="moveimage(-10)">&lt--</button>      <button ng-click="moveimage(10)">--&gt</button>    </div>  </div>

your code not include looks angularjs, save ng-click tags in html buttons, recommend not mixing vanilla js angular.

in case, document global variable in browser, you're okay that, it's warning in atom