querySelectorAllを使用して特定のクラスのすべてのアイテムを繰り返し実行し、条件のセットに基づいて変更を試みる

Question

ドキュメント内のさまざまなセンテンスをクラス "ライン"で作成しようとするとますます不透明になります。彼らが完全に不透明になると、私はサウンドを再生し、不透明度を低下させたい。今のところ私は単に不透明度を-.5に設定しようとしています。

function increaseOpacity() { 

     var lines = document.querySelectorAll(".line"); 
     var increment = .01; 

     for (var i = 0; i < lines.length; i++) { 
     var element = lines[i]; 

     var x = element.getAttribute("opacity"); 

      if (x <= 1) { 
       x += increment; 
      } 

      else if (x >= 1) { 
       x = -.5; 
       var audio = new Audio('sound/hush002.mp3'); 
       audio.play();    
      } 

     } 
    } 


setInterval(increaseOpacity, 500); 

Answer 1

xを変更するだけで、属性は変更されません。

function increaseOpacity() { 

    var lines = document.querySelectorAll(".line"); 
    var increment = .01; 

    for (var i = 0; i < lines.length; i++) { 
    var element = lines[i]; 

    var x = element.getAttribute("opacity"); 

     if (x <= 1) { 
      element.getAttribute("opacity", x + increment); 
     } 

     else if (x >= 1) { 
      element.getAttribute("opacity", -.5); 
      var audio = new Audio('sound/hush002.mp3'); 
      audio.play();    
     } 

    } 
} 

setInterval(increaseOpacity, 500); 

あなたは属性の代わりにスタイルを変更することを意図した場合は、次の操作を行います：

function increaseOpacity() { 

    var lines = document.querySelectorAll(".line"); 
    var increment = .01; 

    for (var i = 0; i < lines.length; i++) { 
    var element = lines[i]; 

    var x = parseInt(element.style.opacity); 

     if (x <= 1) { 
      element.style.opacity += increment; 
     } 

     else if (x >= 1) { 
      element.style.opacity = -.5; 
      var audio = new Audio('sound/hush002.mp3'); 
      audio.play();    
     } 

    } 
} 

setInterval(increaseOpacity, 500); 

Answer 2

不透明度が通常のスタイルではなく、属性であるあなたはsetAttribute()メソッドを呼び出す必要があります。

あなたが使用する必要があります

：

var x = element.style.opacity; 

使用していくつかの点で、それを設定追加：x

element.style.opacity = x; 

をあなたの増分（または減分）の後。