자바 스크립트에서 HTML 객체의 커스텀 속성을 설정하고 사용하기

Question

나는 10x10 테이블이 경기장으로 사용되는 단순한 전함 게임을 만들려고합니다. 나는 보트 길이와 보트 수를 쉽게 바꿀 수 있기를 원합니다. 그래서 나는 HTML 오브젝트 (테이블 셀)에 대한 정보를 저장하려고합니다. 표에는 cell_3_8로 작성된 각 셀의 고유 ID가 있습니다.

제 질문은 셀에 대한 정보를 저장하고 변경하기 위해 사용자 지정 속성 (이 경우 hasBoat)을 사용하는 방법에 관한 것입니다. 모든 셀을 hasBoat 속성을 0으로 설정하고 처음에 보트를 배치하려면 값을 1로 설정했습니다. 현재 보트를 놓으려고 할 때 테이블에 아무 것도 일어나지 않고 Chrome 콘솔을 체크인 할 때 "Uncaught TypeError : 속성 'hasBoat'을 null로 설정할 수 없습니다. '라고 표시됩니다.

여기에서 문제가 무엇인지 설명하고 더 잘 고칠 수 있다면 문제를 해결하는 것이 좋습니다. 여기에 코드입니다 : 당신이 "+ X +" "+ Y"+ ID = "cell_"인 요소를 가지고 있겠지 때문에

var boatCell 
var boatNum; 
var boatLen 
var boatPos; 

function getCoordinate() { 

    for (boatNum = 1; boatNum < 4; boatNum++) { 
     for (boatLen = 1; boatLen < 4; boatLen++) { 
      var x = Math.floor(Math.random() * 10); 
      var y = Math.floor(Math.random() * 10 + 1); 
      x = x++; 
      boatPos = "cell_" + "_" + x + "_" + y; 
      boatCell = document.getElementById(boatPos); 
      boatCell.hasBoat = 1; 
     } 
      if (boatCell.hasBoat == 1) { 
       boatCell.style.backgroundColor = "brown"; 
      } 
    } 
} 

Answer 1

귀하의 문제는, 및 boatCell = document.getElementById (boatPos); 널 (null)로 변수 boatCell의 값을 설정한다, 예를 참조

var exist = document.getElementById("cell_1_4"); 
 
console.log(exist); 
 

 
var notExist = document.getElementById("cell_1_3"); 
 
console.log(notExist);

<div id="cell_1_4"></div>

Answer 2

당신이 얻을 오류가 hasBoat 속성을 설정하는 방법에 대한 없습니다. 대신 boatCell은 null입니다. 난 당신이, 내부 for 내부 if을 가지고과 같이 의미 믿습니다

for (boatNum = 1; boatNum < 4; boatNum++) { 
    for (boatLen = 1; boatLen < 4; boatLen++) { 
     var x = Math.floor(Math.random() * 10); 
     var y = Math.floor(Math.random() * 10 + 1); 
     x = x++; 
     boatPos = "cell_" + "_" + x + "_" + y; 
     boatCell = document.getElementById(boatPos); 
     boatCell.hasBoat = 1; 

     if (boatCell.hasBoat == 1) { 
      boatCell.style.backgroundColor = "brown"; 
     } 
    } 
}