récupérer la valeur du tableau sur mouseover avec javascript

-2

J'essaie de trouver un moyen pour récupérer et afficher la valeur d'une balise div qui est créé avec un tableau 2D en utilisant JavaScript. Je pensais que onclick ou onmouseover fonctionnerait, mais pas non plus dans cette approche. Je voudrais éviter de créer 49 fonctions qui font la même chose (en affichant simplement la 'cellule' de la souris).récupérer la valeur du tableau sur mouseover avec javascript

<style type="text/css"> 
    .float {float: left;} 
    .clear {clear:both;} 
    div {border: thin solid blue; padding: 2px;} 
</style> 
</head> 
<body> 
    <div id="grid"></div> 
    <div id="bucket" class="float"></div> 
</body> 
<script type="text/javascript"> 
var axisY = 7; 
var axisZ = 7; 

for (var i = 0; i < axisY; i++) { 
    for (var j = 0; j < axisZ; j++) { 
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(cellId)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>"; 
    } 
    document.getElementById('grid').innerHTML += "<br class='clear' />"; 
} 

function displayMe(cellId) { 
    // ??? 
} 

function displayNone() { 
    document.getElementById('bucket').innerHTML = ""; 
} 
</script>

Merci!

Source

2013-05-15 Jawa

par identifiant de cellule, vous voulez dire 'zone12'? ou 1: 2? ou autre chose? –

comment voulez-vous l'afficher? –

Vous pouvez simplement obtenir l'identifiant de cellule en passant this.id dans la fonction.

Essayez ceci:

<script type="text/javascript"> 
var axisY = 7; 
var axisZ = 7; 

for (var i = 0; i < axisY; i++) { 
    for (var j = 0; j < axisZ; j++) { 
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>"; 
    } 
    document.getElementById('grid').innerHTML += "<br class='clear' />"; 
} 

function displayMe(cellId) { 
    console.log(cellId); 
} 

function displayNone() { 
    document.getElementById('bucket').innerHTML = ""; 
} 
</script>

Source

2013-05-15 16:18:28

-1

En ce moment vous avez mis en place chaque élément cellulaire pour appeler la fonction displayMe chaque fois que l'événement se produit mouseover. Lorsque vous appelez cette fonction, vous transmettez la variable cellId en tant qu'argument. Le problème est lorsque cette fonction est appelée, cellId n'est pas définie. Vous pouvez voir cette erreur apparaître dans la console de développeur de votre navigateur ("Uncaught ReferenceError: cellId n'est pas défini").

Vous souhaitez probablement transmettre la propriété id de l'élément de cellule, que vous définissez dynamiquement ici: id='area" + i + j + "'. Vous pouvez utiliser la propriété id d'un élément pour rechercher l'élément (comme vous l'avez déjà fait) et obtenir le texte qu'il contient via textContent.

Pour passer la propriété id de l'élément de cellule, vous devez utiliser la variable this, comme suit: this.id. this fera référence à l'élément qui déclenche l'événement. Donc, si vous changez la valeur onmouseover de votre élément div à ceci: onmouseover='displayMe(this.id)', il passera la valeur appropriée à votre fonction displayMe, vous permettant de faire quelque chose comme ceci:

function displayMe(cellId) { 
    document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent; 
}

Avec ces ajustements, votre code ressemble à ceci dans son intégralité:

<style type="text/css"> 
    .float {float: left;} 
    .clear {clear:both;} 
    div {border: thin solid blue; padding: 2px;} 
</style> 
</head> 
<body> 
    <div id="grid"></div> 
    <div id="bucket" class="float"></div> 
</body> 
<script type="text/javascript"> 
var axisY = 7; 
var axisZ = 7; 

for (var i = 0; i < axisY; i++) { 
    for (var j = 0; j < axisZ; j++) { 
    document.getElementById('grid').innerHTML += "<div onmouseout='displayNone()' onmouseover='displayMe(this.id)' id='area" + i + j + "' class='float'>" + i + ":" + j + "</div>"; 
    } 
    document.getElementById('grid').innerHTML += "<br class='clear' />"; 
} 

function displayMe(cellId) { 
    document.getElementById('bucket').innerHTML = document.getElementById(cellId).textContent; 
} 

function displayNone() { 
    document.getElementById('bucket').innerHTML = ""; 
} 
</script>

Source

2013-05-15 16:43:50

Ah, je n'étais pas au courant de la méthode innerText. Cela fonctionne avec un léger tweak: fonction displayMe (cellId) { \t var cellText = document.getElementById (ID_cellule) .innerText; \t document.getElementById ('compartiment'). InnerHTML = celluleTexte; } Merci @ahenninger! – Jawa

Vous êtes les bienvenus! Oui, votre tweak ferait la même chose mais un peu plus lisible. –

Pourquoi le downvote? –

récupérer la valeur du tableau sur mouseover avec javascript

Répondre

Questions connexes