테이블 요소의 JavaScript 불투명도

Question

저는 JavaScript 및 AJAX의 초보자입니다!

select 요소의 상태가 변경 될 때 AJAX를 사용하여 HTML 테이블 요소 (div에 포함)를 업데이트하는 JavaScript 코드가 있습니다. 그 부분은 완벽하게 작동합니다.

반면에, 업데이트 할 때 불투명 애니메이션을 얻을 수 없습니다. 크롬의 자바 스크립트 콘솔은 나에게 말한다 :

Uncaught TypeError: Cannot read property 'style' of undefined

자바 스크립트 코드의 라인 2에서.

function fadeIn(objectToFade) { 
    objectToFade.style.opacity = parseFloat(objectToFade.style.opacity) + 0.1; 

    if (objectToFade.style.opacity < 1) { 
     setTimeout(function() { fadeIn(objectToFade); }, 50); 
    } 
} 

function fadeOut(objectToFade) { 
    objectToFade.style.opacity = parseFloat(objectToFade.style.opacity) - 0.1; 

    if (objectToFade.style.opacity > 0.2) { 
     setTimeout(function() { fadeOut(objectToFade); }, 50); 
    } 
} 

function changeClient(client) { 

    var clientTableDiv = document.getElementById("clientTable"); 
    var xmlhttp = new XMLHttpRequest(); 

    fadeOut(document.getElementById("MetricsStatsByClient")); 

    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      clientTableDiv.innerHTML = xmlhttp.responseText; 
      fadeIn(document.getElementById("MetricsStatsByClient")); 
     } 
    } 

    xmlhttp.open("GET","functions.php?fct=cc&client=" + client, true); 
    xmlhttp.send(); 
} 

"스타일"속성이 인식되지 않는 것 같다

여기 내 자바 스크립트 코드입니다. 내가 뭘 잘못하고 있니?

감사합니다.

EDIT 1

재귀 호출의 매개 변수를 고정 후, 나는 NaN (숫자)를 얻을 changeClient 기능이 실행되는 동안 :

alert(parseFloat(document.getElementById("MetricsStatsByClient").style.opacity)); 

Answer 1

당신은 전달되지 않습니다 객체 참조이므로 objectToFade은 정의되지 않았습니다.

setTimeout(fadeIn, 50); 

그래서 당신은 또한 당신의 fadeOut와

setTimeout(function() { fadeIn(objectToFade); }, 50); 

같은 일을 따라 통과해야합니다. 당신이 setTimeout 호출에 fadeOut/fadeIn, 당신이 기대하는 요소 매개 변수를 지정하지 않은 통과

Answer 2

:

if (objectToFade.style.opacity < 1) { 
    setTimeout(function() { 
     fadeIn(objectToFade); 
    }, 50); 
}