ID de lien de détection onClick

J'ai donc une matrice 4x3 où les carrés rouges ou bleus sont des liens. Quand je clique sur les liens, je veux obtenir l'ID des liens, cependant, j'obtiens cette erreur sur la ligne 63: TypeError: Le résultat de l'expression 'targ' [undefined] n'est pas un objet. J'utilise le code basé sur ce http://www.quirksmode.org/js/events_properties.html#target ID de lien de détection onClick

Heres un exemple en direct: 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'; 
     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>

Source

2010-01-03 Raptrex

Il y a quelques problèmes ici, mais la réponse à votre question immédiate est que vous passez parfaitement un élément dans votre gestionnaire d'événements et que vous n'avez pas besoin d'impliquer des objets d'événement. Vous pouvez modifier la fonction current comme suit:

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'); 
}

En outre, vous devez utiliser la propriété className d'un élément plutôt que getAttribute et setAttribute.

Source

2010-01-03 22:13:32

Vous passez this explicitement dans votre gestionnaire d'événements appelle dans l'attribut onclick. Donc, je ne pense pas que l'argument e dans votre fonction current(e) fasse référence à l'objet événement: vous avez vérifié qu'il faisait référence à l'élément cliqué lui-même.

Parce que e fait référence à un élément, pas à l'objet d'événement, la propriété cible n'est pas définie, ce qui explique pourquoi vous obtenez l'erreur.

Heureusement, si vous faites passer this à current(), obtenir l'ID est maintenant très simple: dans la fonction current(), e.getAttribute("id") ou même e.id vous obtiendrez l'id.

Source

2010-01-03 22:13:04

Lorsque vous transmettez this dans votre gestionnaire onclick, vous transmettez l'objet HTMLAnchorElement, pas l'objet d'événement. Utilisez simplement e = window.event sans condition (sans if (!e)). Ou vous pouvez simplement utiliser e.id pour obtenir l'identifiant de l'élément sur lequel vous avez cliqué.

Vous pouvez également enregistrer des gestionnaires d'événements via addEventListener (plus conforme à DOM). L'argument e sera donc l'objet événement.

Source

2010-01-03 22:13:15

'window.event' est non standard. Vous voulez utiliser 'window.event || arguments [0]'. –

ID de lien de détection onClick

Répondre

Questions connexes