使用箭头按钮和javascript左右移动图像显示栏

Question

Sorry it is a small piece of code, but I am trying to scroll the image bar left or right with the two arrow buttons in my html. The error that is showing is "Uncaught TypeError: Cannot read property 'style' of null at movingImage" Please if anyone 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 is saying document is undefined but not sure if that is a problem or not as not showing in console.

Thank you!!

Answer 1

It's hard to tell what you're doing, because you're mixing a few different things but you tagged this question as an AngularJs question, so I made a quick example of what you would want to do with an "angular" approach. Have a look:

https://jsfiddle.net/26eLe0xo/

As you can see in the code below, there is a very simple controller behind the html, and it only has one function, which alters a value associated with its scope. When the value is updated, the image's style attribute updates, moving the 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 does not include anything that looks like AngularJs, save for the ng-click tags in your html buttons, so I would recommend not mixing too much vanilla js with Angular.

In any case, document will be a global variable in your browser, so you're okay with that, it's most likely a warning in Atom