Festlegen und Verwenden von benutzerdefinierten Eigenschaften von HTML-Objekten in Javascript

Question

Ich versuche, ein einfaches Schlachtschiff-Spiel zu machen, wo eine 10x10-Tabelle als Spielfeld verwendet wird. Ich möchte in der Lage sein, die Bootslänge und Anzahl der Boote leicht zu ändern, weshalb ich versuche (versuche), Informationen gegen das HTML-Objekt (Tabellenzelle) zu speichern. Die Tabelle hat eindeutige IDs für jede Zelle, geschrieben als cell_3_8.

Meine Frage ist, wie ich eine benutzerdefinierte Eigenschaft verwenden kann, in diesem Fall hasBoat, um Informationen über die Zellen zu speichern und zu ändern. Ich habe jede Zelle gesetzt, um die Eigenschaft hasBoat auf 0 am Anfang zu haben, und setze den Wert auf 1, wenn ich möchte, dass ein Boot dort platziert wird. Momentan passiert nichts, wenn ich versuche, Boote zu platzieren, und beim Einchecken in der Chrome-Konsole heißt es "Uncaught TypeError: Kann die Eigenschaft 'hasBoat' von null nicht setzen".

Wenn Sie erklären könnten, was das Problem hier ist, und noch besser, wie es zu beheben ist, wäre das großartig. Hier ist der Code:

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

Ihr Problem ist, weil Sie nicht über ein Element mit id = "cell_" + "" + x + "" + y; und boatCell = document.getElementById (BootPos); wird den Wert Ihrer Variable boatCell auf null gesetzt,

siehe Beispiel

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

Der Fehler ist erhalten nicht über das hasBoat Attribut festlegen. Stattdessen ist es boatCell ist null. Ich glaube, dass Sie die if innerhalb der inneren for haben sollten, etwa so:

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"; 
     } 
    } 
}