Tabletop Map Tool Javascript Help - onclick event fails when text is in the box

sikuneh

New Member
Messages
55
Reaction score
0
Points
0
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:

sikuneh

New Member
Messages
55
Reaction score
0
Points
0
Fixed. Just a note, FireBug apparently adds text/html just cosmetically and it doesn't register onclick events.
 

essellar

Community Advocate
Community Support
Messages
3,295
Reaction score
227
Points
63
It doesn't help when the "bug" is the debugger, does it? Between fixing race conditions, doing silent background recompiles (and running that instead of the "real" code), and decorators like you've just described, I've been bitten by debuggers often enough now to take what they have to say with many, many grains of salt.
 
Top