はJavaScriptを

-1

とHTMLでの画像のためのサイクリング変数のsrc属性を作るためにどのように私はこのコードを作っ：はJavaScriptを

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <h1> Some Traffic Lights</h1> 
 

 
    <div ng-app="myApp" ng-controller="myCtrl"> 
 

 
    <img id="trafficLight" src="TLgre.png" /> 
 

 
    <script> 
 
     var app = angular.module('myApp', []); 
 

 
     //*****Declaring Variables*****// 
 

 
     var lightSrcs = ['TLgre.png', 'TLyel.png', 'TLred.png']; 
 
     var cycleNumber = 0; 
 
     var Order = 0; 
 

 
     //*****Number Cycling Function*****// 
 

 
     function cycle() { 
 
     if (Order === 0) { 
 
      if (cycleNumber == 3) { 
 
      cycleNumber -= 1; 
 
      Order = 1; 
 
      } else { 
 
      cycleNumber += 1; 
 
      } 
 
     } else if (Order === 1) { 
 
      if (cycleNumber <= 0) { 
 
      cycleNumber += 1; 
 
      Order = 0; 
 
      } else { 
 
      cycleNumber -= 1; 
 
      } 
 
     } 
 
     return cycleNumber; 
 
     } 
 
    </script> 
 

 
    <button type="button" onclick="document.getElementById('trafficLight').src = lightSrcs[cycle()];"> 
 
     Click to cycle lights</button> 
 
    </div> 
 

 
</body> 
 

 
</html>

をそして、それが動作しない理由を私は知りません。私はonclickイベントでJavaScriptを実行できないか、またはスクリプトタグから関数を使用することができなかったという2つの推測をしました。私の他の推測では、src属性を変数として与えることができず、むしろ奇妙に思えるかもしれません。おそらく私はなぜ混乱していますか？誰かが私に間違っていることを教えてもらえればそれはすばらしいだろう。私はそれを改善するための提案をすることができる。（私はちょっとAngularJSも知っている）、ただ一つ、三つの画像私は配列にしたい。なぜなら私の先生は、彼らがいなければならないと言いました。

出典

2016-05-03 Azriel Bowles

より多くの角度ロジックを使用して、コントローラを設定し、角度ng-srcディレクティブを使用してこれを実現することができます。今、あなたは混在しており、プレーンjs domの選択と角度にマッチしています。あなたは簡単に純粋な角度でこのようなことをすることができますし、あなたはすでにアプリを設定している。 – ajmajmajma

あなたのページに既に読み込まれている角度を使って、これを簡単にすることができます。あなたがそれを利用しようとしていない場合、角度のような大きなフレームワークを読み込むには、実際のポイントはありません:)。 https://plnkr.co/edit/06xChEaDyOEQ89aJktfR?p=preview

あなたは ng-clickと角度のロジックを使用するようにIMGやボタンを変更することができ

とng-srcそうのような：

<img id="trafficLight" ng-src="{{lightSrcs[currentSelection]}}"></img> 

<button type="button" ng-click="cycleLights()" >

その後で、あなたが探しているものをとにかく

は、このようなものですコントローラの場合は、次のようなことができます：

$scope.lightSrcs = ['TLgre.png', 'TLyel.png', 'TLred.png']; 
$scope.currentSelection = 0; 

$scope.cycleLights = function(){ 
if($scope.currentSelection === 2) { 
    $scope.currentSelection = 0; 
} else { 
    $scope.currentSelection += 1; 
} 

};

このよりもさらにエレガントな方法があります鶏は配列を使っていますが、例のために、私は自分のロジックを使用します。だからあなたはコントローラ上で$ scope関数を呼び出すボタンの上にあるng-clickを持っています。その関数でカウントを回転させることができます。次に、imgにng-srcを使用して、回転している配列とインデックスを使用して、画像の位置を角度で正しく評価します。

出典

2016-05-03 13:33:14 ajmajmajma

うわー、ありがとう、うそじゃない、ng-srcが存在することさえ知らなかったかもしれない。 –

@AzrielBowles問題はない、うれしく思う。角度には1トンもありますが、それは少しでも習得することができますが、かなりの問題を処理するためのツールがたくさんあります！この解決策があなたのために働くならば、問題はもはや開いていないので、印は正しいと思います。 – ajmajmajma

答えて

関連する問題