자바 스크립트 함수 호출이 분명히 실행되지 않습니다.

Question

저는 간단한 웹 기반 게임을 만들기 위해 HTML5 캔버스를 사용하고 있습니다.

현재 내 페이지가로드되면 캔버스의 임의의 위치에 여러 이미지가 표시되어 사용자는 올바른 위치로 드래그해야합니다.

괜찮습니다.하지만 게임을 시작하려면 이미지가 표시되기 전에 사용자가 클릭해야하는 캔버스에 시작 버튼을 추가하고 싶습니다.

내 index.html 페이지에서 다음 JS 기능이 있습니다

window.onload = function(){ 
    var sources = []; 
     sources[0] = document.getElementById("building").src, 
     sources[1] = document.getElementById("chair").src, 
     sources[2] = document.getElementById("drink").src, 
     sources[3] = document.getElementById("food").src, 
     sources[4] = document.getElementById("fridge").src, 
     sources[5] = document.getElementById("land").src, 
     sources[6] = document.getElementById("money").src, 
     sources[7] = document.getElementById("oven").src, 
     sources[8] = document.getElementById("table").src, 
     sources[9] = document.getElementById("van").src, 

     sources[10] = document.getElementById("burger").src, 
     sources[11] = document.getElementById("chips").src, 
     sources[12] = document.getElementById("drink").src, 
     sources[13] = document.getElementById("franchiseFee").src, 
     sources[14] = document.getElementById("wages").src, 

     sources[15] = document.getElementById("admin").src, 
     sources[16] = document.getElementById("cleaners").src, 
     sources[17] = document.getElementById("electricity").src, 
     sources[18] = document.getElementById("insurance").src, 
     sources[19] = document.getElementById("manager").src, 
     sources[20] = document.getElementById("rates").src, 
     sources[21] = document.getElementById("training").src, 
     sources[22] = document.getElementById("water").src, 

     sources[23] = document.getElementById("burger").src, 
     sources[24] = document.getElementById("chips").src, 
     sources[25] = document.getElementById("drink").src, 

     sources[26] = document.getElementById("creditors").src, 
     sources[27] = document.getElementById("electricity").src, 
     sources[28] = document.getElementById("food").src, 
     sources[29] = document.getElementById("hirePurchase").src, 
     sources[30] = document.getElementById("loan").src, 
     sources[31] = document.getElementById("overdraft").src, 
     sources[32] = document.getElementById("payeTax").src, 
     sources[33] = document.getElementById("tax").src 

    drawStartButton(); 
    loadImages(sources, drawImage); 
    drawGameElements(); 
    drawDescriptionBoxes(); 

}; 

함수의 모든이를 제외하고, 의도 된 기능을 수행하는 호출되고이 일의 끝에서 다른 함수를 호출하고, drawStartButton(); 하나, 방금 추가했습니다.

이 함수가 호출되지 않는 이유는 아주 이해가 안

... drawStartButton();의 코드는 별도의 JS 파일에 있으며, 다음과 같습니다

function drawStartButton(){ 
      image.onload = function(){ 
       context.drawImage(image, 410.5, 120); 
      }; 
      image.src = startButton; 

내가 참조해야합니까 기능이 저장된 파일? drawStartButton()과 같은 JS 파일에있는 다른 함수 호출을 수행하지 않았습니다.

이 함수가 호출되지 않는 이유는 무엇입니까? ?

Answer 1

뒤에 세미콜론을 추가

sources[33] = document.getElementById("tax").src 

또한 (그냥 좋은 연습), (자신의 src 년대를 얻기 위해 시도하기 전에 이러한 모든 요소가 존재 (및로드) 있는지 확인하지만 당신에게 그 괜찮을 것 같네요, 그래서 이미 onload가)

을 지금, 당신은 모든 getElementById 'SA 비트 단순화 할 수 있습니다.

을

getElementById이 null을 반환하기 때문에 코드가 손상 될 가능성이 큽니다.
은 (또한, 당신이 거기에 중복이 그 목적에?)

당신은 대신 루프를 사용하여이를 테스트 할 수 있습니다

for(var i = 0, l = sourceNames.length; i < l; i++){ 
    console.log('Getting ' + sourceNames[i]); 
    sources[i] = document.getElementById(sourceNames[i]).src; 
} 

당신이 얻을 마지막으로 어떤 요소를 볼 수 있습니다.

또한 drawStartButton() 함수가 포함 된 파일이 먼저로드되어야합니다. 그렇지 않으면이 함수가 존재하지 않습니다.

그리고 마지막으로 :

당신은 당신이 당신의 HTML 파일에서이 일하기 전에 자바 스크립트 파일을 다른 포함되어 있는지 확인해야합니다 image.src = startButton.src;

Answer 2

와 image.src = startButton; 교체 후 모든 것이 잘 작동합니다.또한 내가 복사 붙여 넣기 오류라고 느끼지만 기능 본체를 }으로 닫아야합니다.

다른 사람들이 설명했듯이. 자바 스크립트의 각 문장을 끝내기.

Answer 3

자바 스크립트 코드에서이 긴 응용 프로그램 별 ID 이름을 사용하는 대신, 공통적으로 가지고있는 클래스로 html 요소를 가져와야합니다. 다만 가진 후 태그에 클래스를 추가하는 대신에 태그를 추가하고 프리로드됩니다

<img class="preload_image" src"..."> 

및

var preload_images = document.getElementsByClassName('preload_image'); 
var sources = []; 
for(var i = 0;i < preload_images.length;i++){ 
sources.push(preload_images[i].src); 
} 

이 같은 자바 스크립트 뭔가

는 코드 청소기를 유지하고 당신은 확실히 뭔가를 할 수 있습니다 js 파일로 이동하여 소스 목록에 태그의 ID를 추가하십시오. 또한 코드를 변경하지 않고 다른 프로젝트에서 코드를 사용하기 만하면되므로 코드가보다 유연하게 유지됩니다.