2016-07-26 6 views
0

이 복제본을 찾을 수도 있지만 그 답은 모두 작동하지 않습니다. 나는 휴일 프로젝트와 같은 Simon 프로그램에서 일하고 있는데이 JavaScript 코드의 41 번째 줄에 문제가있다. 문제는 HTML 파일에서 ID를 '존재하지만, 또한 점점'이다 '널 (null) :Simon.js : 잡히지 않은 TypeError : null의 속성 'style'을 읽을 수 없습니다.

var pccolor = []; 
var usercolor = []; 

function SimonStart() { 

    document.getElementById("start").style.opacity = .3; 

MakeColors(); 
} 

function MakeColors() { 

    var colors = [1, 2, 3, 4, 6, 7, 8, 9]; 
    var randcolor = colors[Math.floor(Math.random() * colors.length)]; 
    pccolor.push(randcolor); 
    LightColor(randcolor, 1000); 

} 

var randcolor; 
var s; 

function LightUp() { 

    LightColor(pccolor[s]); 
    s++; 

    if (s < pccolor.length) { 

     setTimeout(function() { 
      LightUp(); 

     }, 500); 

    } 
} 

function LightColor(color, TimeOut) { 

    var TimeOut = 1000; 
    document.getElementById("c" + color).style.opacity = "1"; //doesn't work! 
    setTimeout(function() { 

     document.getElementById("c" + color).style.opacity = ".3"; 

    }, TimeOut); 

} 

function Button(OnClick) { 

    LightColor(OnClick); 
    usercolor.push(OnClick); 
    var i = usercolor.length - 1; 
    if (pccolor[i] != usercolor[i]) { 

     setTimeout(function() { alert("You lose!"); }, 300); 
     pccolor = []; 
     usercolor = []; 

    } else if (pccolor.length == usercolor.length) { 

     usercolor = []; 
     pccolor.push(randcolor); 
     s = 0; 
     setTimeout(function() { 

      LightUp(); 
     }, 500); 

    } 
} 

여기의 .js가 끝을 파일 곳이며,이 중 하나는 HTML 파일입니다

<!DOCTYPE html> 
<html> 
<head> 
... 

<script type="text/javascript" src="Simon.js"></script> 

<link rel="stylesheet" type="text/css" href="Simon.css"> 

</head> 

<body> 
    <div class="centerDiv"> 
     <div class="negro"> 
      <div class="color" id="c1" onclick="Button (1);"> </div> 
      <div class="color" id="c2" onclick="Button (2);"> </div> 
      <div class="color" id="c3" onclick="Button (3);"> </div> 
     </div> 
     <div class="negro"> 
      <div class="color" id="c4" onclick="Button (4);"> </div> 
      <div class="color" id="start" onclick="SimonStart();"></div> 
      <div class="color" id="c6" onclick="Button (6);"> </div> 
     </div> 
     <div class="negro"> 
      <div class="color" id="c7" onclick="Button (7);"> </div> 
      <div class="color" id="c8" onclick="Button (8);"> </div> 
      <div class="color" id="c9" onclick="Button (9);"> </div> 
      </div> 
    </div> 

</body> 
</html> 

아무도 나를 도와 드릴까요 ???

+0

'console.log (color)'무엇입니까? – epascarello

+0

@epascarello 그게 없다 ... 나는 단지 이것의 초심자이다 ... 내가 그것을 찾았으니, 그게 무슨 뜻인지 약간의 생각이 있지만 그것을 넣는 법을 모른다. 코드 ... –

+0

그럼 당신은 콘솔을 사용하는 방법을 배워야합니다. https://developers.google.com/web/tools/chrome-devtools/?hl=ko 요소를 선택하는 위치에 그 줄을 넣으십시오. 개발자 콘솔에 값을 쓸 때 값이 무엇인지 확인하십시오. – epascarello

답변

-1

HTML 파일의 끝에 스크립트 태그를 배치하십시오.

코드가 본질적으로 DOM이로드되기 전에 실행되므로 JavaScript 프로그램에서 처리 할 HTML이 없습니다.

+0

문제는 다음과 같습니다. 시작 버튼을 누르면 임의의 색상이 켜지고 사용자가 해당 색상을 누르면 오류가 발생합니다. 처음으로 LightColor 함수를 실행하면 ir가 작동하지만 두 번째는 그렇지 않습니다. . –

관련 문제