I'm creating a tabletop role-playing game map tool. At the moment I'm working on a move function to change the position on a 20x20 grid. Whenever I click on an empty square I get the two debug alerts that I wanted. When I add text through FireBug on a specific cell, then click on the square, nothing happens. Thanks in advance.
Code:
window.onload = initPage;
// Globals
var gs_buffer = null;
const GKN_INPUT_MOVE_KEY = 0;
const GKN_INPUT_ALT_KEY = 1;
const GKN_INPUT_CREATE_KEY = 2;
const GKN_INPUT_OBSTACLE_KEY = 3;
// ..
var gn_input_type = 0;
function initPage() {
const KN_ROW_NUM = 20;
const KN_COL_NUM = 20;
const KCOL_GRID_OUTPUT = document.getElementById("grid");
var s_grid_output = "<table border='2' id='battle_grid'>";
for (var i = 1; i <= KN_ROW_NUM; i++) {
s_grid_output += "<tr>";
for (var j = 1; j <= KN_COL_NUM; j++) {
s_grid_output += "<td posx='"+j+"' posy='"+i+"' title='("+j+","+i+")' altitude='0'></td>";
}
s_grid_output += "</tr>";
}
s_grid_output += "</table>";
KCOL_GRID_OUTPUT.innerHTML = s_grid_output;
var col_cells = document.getElementById("grid").getElementsByTagName("td");
for (var i = 0; i < col_cells.length; i++) {
col_cell = col_cells[i];
col_cell.onclick=function() {
if (gn_input_type == GKN_INPUT_MOVE_KEY) {
move(this);
}
// ..
}
return true;
}
function move(e) {
alert("Execute MOVE command");
alert("Position (x,y): " + e.getAttribute("posx") + ", " + e.getAttribute("posy"));
// Check if there is a character in the buffer waiting to be moved
if (gs_buffer != '' && e.innerHTML == '') {
alert("Placing...");
e.innerHTML = gs_buffer;
gs_buffer = '';
}
else if (gs_buffer == '' && e.innerHTML != '') {
alert("Storing...");
gs_buffer = e.innerHTML;
e.innerHTML = '';
}
return true;
}
// ..
function changeInputType() {
var col_inputs = document.forms[0].elements['input_types'];
for (var i = 0; i < col_inputs.length; i++) {
if (col_inputs[i].checked) {
gn_input_type = col_inputs[i].value;
break;
}
}
}
// ..
HTML:
<div id="inputs">
<form action="#" method="get" id="inputs_form" name="inputs_form">
<ul>
<li onclick="changeInputType()"><input type="radio" name="input_types" id="input_type_move" value="0" /> <label for="input_type_move">Move</label></li>
<li onclick="changeInputType()"><input type="radio" name="input_types" id="input_type_alt" value="1" /> <label for="input_type_alt">Altitude</label></li>
<li onclick="changeInputType()"><input type="radio" name="input_types" id="input_type_create" value="2" /> <label for="input_type_create">Create Characters</label></li>
<li onclick="changeInputType()"><input type="radio" name="input_types" id="input_type_obstacle" value="3" /> <label for="input_type_obstacle">Obstalces</label></li>
</ul>
</form>
</div>
<div id="grid">
</div>
Last edited: