Moving Image Anzeigebalken links oder rechts mit Pfeiltasten und Javascript

Question

Sorry, es ist ein kleines Stück Code, aber ich versuche, die Bildleiste nach links oder rechts mit den zwei Pfeiltasten in meinem HTML zu scrollen. Der Fehler, der angezeigt wird, ist "Uncaught TypeError: Kann die Eigenschaft 'style' von null bei movingImage" nicht lesen Bitte, wenn jemand helfen kann, lass es mich wissen.

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>

Auch Atom sagt Dokument nicht definiert ist, aber nicht sicher, ob das ein Problem ist oder nicht, wie nicht in der Konsole zeigt.

Vielen Dank !!

Answer 1

Es ist schwer zu sagen, was Sie tun, weil Sie ein paar verschiedene Dinge mischen, aber Sie haben diese Frage als eine AngularJs Frage markiert, also machte ich ein kurzes Beispiel dafür, was Sie mit einem "eckigen" machen würden " Ansatz. Werfen Sie einen Blick:

https://jsfiddle.net/26eLe0xo/

Wie Sie in dem unten stehenden Code sehen können, gibt es eine sehr einfache Steuerung hinter dem html, und es hat nur eine Funktion, die einen Wert mit seinem Umfang zugeordnet verändert. Wenn der Wert aktualisiert, die style der Bildattribut-Updates, Bewegen das Bild

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>

Ihr Code enthält nicht alles, was wie AngularJS aussieht, für die ng-Klick-Tags im HTML-Tasten speichern , also würde ich empfehlen, nicht zu viel Vanille js mit Angular zu mischen.

In jedem Fall document wird eine globale Variable in Ihrem Browser sein, so sind Sie mit, dass okay, es ist höchstwahrscheinlich eine Warnung in Atom