Detect link ID onClick_问答_开发者_运维开发者技术经验分享

So I have a 4x3 matrix where the red or blue squares are links. When I click on the links, I want to get the ID of the links, however, I get this error on line 63: TypeError: Result of expression 'targ' [undefined] is not an object. I am using code based on this http://www.quirksmode.org/js/events_properties.html#target

Heres a live example: https://dl.dropbox.com/u/750932/iPhone/risk.html

<!DOCTYPE html>
<html>
<head>
<title>RISK</title>
<style type="text/css" media="screen">
    a:link, a:visited {color: #eee;border:3px solid #ccc;display:inline-block;margin:3px;text-decoration:none;padding:26px;}
    .blank {background:#fff;}
    .one {background: #7B3B3B;}
    .two {background: #547980;}
    #status {color: #eee;padding:1px;text-align:center}
    #error {background:#FFD41F;}
    .current {border:3px solid #000;}
    p {margin:0 0 15px;padding:0;}
    input {height:40px;width:90px;}
</style>
<script type="text/javascript" charset="utf-8">
var playerOne = true;
var gameOver = false;

function newGame()
{
    var status = document.getElementById('status');
    var one = 0;
    var two = 0;
    gameOver = false;
    playerOne = true;
    status.innerHTML = 'Player One\'s turn';
    status.setAttribute('class', 'one');

    var board = [1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2];

    // shuffle the array
    for(var j, x, i = board.length; i; j = parseInt(Math.random() * i), 
        x = board[--i], board[i] = board[j], board[j] = x);

    var row = -1;
    for (var i = 0; i < board.length; i++) {
        var cssClass = board[i] == 1 ? 'one' : 'two';
        var col = i % 4;
        if (col == 0) row++;
        document.getElementById('a' + col + '_' + row).setAttribute('class', cssClass);
    }

    for(var x = 0; x < 4; x++)
    {
        for(var y = 0; y < 3; y++)
        {
            document.getElementById('a' + x + '_' + y).innerHTML = Math.floor(Math.random()*5 + 1);
        }
    }
}
function current(e)
{
    var value = e.innerHTML;
    var cssClass = e.getAttribute('class');
    var targ;
    if (!e) 
        var e = window.event;
    if (e.target) 
        targ = e.target;
    else if (e.srcElement) 
        targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    var theID = targ.id;

    if (cssClass == 'one' && playerOne == true)
    {
        alert('you choose your square' + theID);
    }
    else if (cssClass == 'two' && playerOne == false)
    {
        alert('player 2 choose correct square' + theID);
    }
    else
        alert('ERROR: you didnt your square');
}
function nextTurn()
{
    if (playerOne == true)
        playerOne = false;
    else
        playerOne = true;

    var status = document.getElementById('status');

    if (playerOne == true)
    {
        status.innerHTML = 'Player One\'s turn';
 开发者_Go百科       status.setAttribute('class', 'one box');
    }
    else
    {       
        status.innerHTML = 'Player Two\'s turn';
        status.setAttribute('class', 'two box');
    }
}
</script>
<meta name="viewport" content="user-scalable=no, width=device-width" />
</head>

<body onload='newGame();'>
<p id="status" class="one">Player One's turn</p>
<a href="#" id="a0_0" class="blank" onclick="current();"></a>
<a href="#" id="a1_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_0" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_0" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_1" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_1" class="blank" onclick="current(this);"></a>
<br />

<a href="#" id="a0_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a1_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a2_2" class="blank" onclick="current(this);"></a>
<a href="#" id="a3_2" class="blank" onclick="current(this);"></a>
<br /><br />
<p><input type="button" id="nextTurn" value="End Turn" onclick="nextTurn();" /></p>
<p><input type="button" id="newgame" value="New Game" onclick="newGame();" /></p>
</body>
</html>

There's a few issues here, but the answer to your immediate question is that you're passing an element into your event handler perfectly fine and there's no need to involve event objects. You can change the current function as follows:

function current(targ)
{
    var value = targ.innerHTML;
    var cssClass = targ.className;
    var theID = targ.id;

    if (cssClass == 'one' && playerOne == true)
    {
        alert('you choose your square' + theID);
    }
    else if (cssClass == 'two' && playerOne == false)
    {
        alert('player 2 choose correct square' + theID);
    }
    else
        alert('ERROR: you didnt your square');
}

Also, you should use the className property of an element rather than getAttribute and setAttribute.

When you pass this into your onclick handler you pass the HTMLAnchorElement object, not the event object. Just use e = window.event unconditionally (without if (!e)). Or you can just use e.id to get id of the clicked element.

Alternatively you can register event handlers via addEventListener (more DOM conformant way). So the e argument will be the event object.

You are passing this explicitly into your event handler calls in the onclick attribute. So I don't think the e argument in your current(e) function refers to the event object: you made sure it refers to the clicked element itself.

Because e refers to an element, not the event object, the target property is not defined, which is why you are getting the error.

Fortunately, if you do pass this to current(), getting the id is now really simple: inside the current() function, e.getAttribute("id") or even e.id will get you the id.