Récuperer l'id d'une image et de son parent en cliquant sur l'im [Résolu]

Question

Posez votre question Signaler

Récuperer l'id d'une image et de son parent en cliquant sur l'im [Résolu]

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 10 mai 2016 à 11:39 - Dernière réponse : jordane45 21038 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 mai 2018 Dernière intervention

- 11 mai 2016 à 18:04

Javascript / DHTML Posez votre question Signaler

Bonjour,
Je n'arrive pas à trouver sur le web comment récupérer l'id de l'image et l'id du parent en cliquant sur l'image ou q'elle soit
Pouvez vous m'aider?
le code ne fonctionnat pas est dans la fonction dblclik
Cordialement


<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <meta charset="UTF-8">
    <style type="text/css">
        body {
            background-color: #9CB7D4;
        }

        .div-drag {
            margin-left: 35%;
            display: inline-block;
            width: 50px;
            height: 50px;
            border: solid 1px black;
            border-radius: 25px;
            background-color: yellow;
            position:relative;
        }

        .div-drop {
            
            display: inline-block;
            width: 50px;
            height: 50px;
           /* border: solid 1px black;*/
            border-radius: 25px;
            background-color: yellow;
            position:relative;
        }

        .divabsolute {
            top: 0px;
            left: 0px;
            position:absolute;
        }

        .plateaucadre{
	margin-left:35%;
    height:544px;
	width:544px;
	background-size: 100% 100%;
	
    border:solid 2px black;
            border-radius:10px;
           background-color: deepskyblue;
}

.tbaide{

	position: relative;
	display:inline-block;
	margin-left: 2px;
	margin-top: 2px;
	float:left;
	font-size:0;
 
            border-radius:8px;
           background-color: red;;
}

.tbaide td{

	height:50px;
	width:50px;
	margin: 0px;
	padding:0px;
    
            border-radius:50px;
           background-color: yellow;
}

.plateaucadre{
	margin-left:50%;
            margin-top: 5px;
	height:525px;
	width:525px;
	background-size: 100% 100%;
	/*background-image:url("image/game.jpg");*/
    border:solid 2px black;
            border-radius:10px;
           background-color: deepskyblue;;
	
}
        .valideroperation {
            margin-left:50%;
            display: inline-block;
            width: 50px;
            height: 50px;
            background: url(valider.png);
            border: solid 0px black;
        }
    </style>
    <script type="text/javascript">

        function valideroperation () {
            
                    var element = document.getElementById('divdrage1');
                    element.parentNode.removeChild(element);
                    var drag = document.getElementById('divdropt91')
                    var jeton = document.createElement("img");
                    jeton.id = "divdrage1";
                    jeton.className = "divabsolute";
                    jeton.src = "sdiv.png";
                   jeton.setAttribute("draggable", "true");
                    jeton.ondragstart = inst.drag;
                    drag.appendChild(jeton);
        }

        function chifukoo() {
this.init();
        }
        chifukoo.prototype.dblclick = function (ev) {
            var element = document.getElementById(ev.target.id);
            var contenu = element.innerHTML;
            var iddrag = ev.dataTransfer.getData('IdElement');
            alert(iddrag);

        }
    chifukoo.prototype.drag = function (ev) {
        ev.dataTransfer.setData('IdElement', ev.target.id);
    }
    chifukoo.prototype.allowDrop = function (ev) {
        ev.preventDefault();
    }
chifukoo.prototype.drop = function (ev) {
    
    ev.preventDefault();
    var element = document.getElementById(ev.target.id);
    var contenu = element.innerHTML;
    var iddrag = ev.dataTransfer.getData('IdElement');
    var iddrop = element.id
    var zdrag = iddrag.substring(0, 8);
    var zdrop = iddrop.substring(0, 8);
    alert("iddrag =" + iddrag + "/iddrop =" + iddrop + "/zdrag =" +zdrag + "/zdrop =" + zdrop + "/contenu cible =" + contenu.length);
    ev.target.appendChild(document.getElementById(iddrag));



    }
	chifukoo.prototype.init = function () {
	    tbaide = document.createElement("table");
	    tbaide.className = "tbaide";
	    for (var i = 0; i < 10; i++) {
	        var wor = tbaide.insertRow(i);
	        for (var j = 0; j < 10; j++) {
	            var cel = wor.insertCell();
	            var dv = document.createElement("div");
	            dv.id = "divdropt" + ((i * 10) + j + 1);
	            dv.className = "div-drop";
	            dv.ondrop = this.drop.bind(this);
	            dv.ondragover = this.allowDrop.bind(this);
	            dv.ondblclick = this.dblclick.bind(this);
	               
	            cel.appendChild(dv);;
	        }
	    }
	    document.querySelector(".plateaucadre").appendChild(tbaide);
	var drag = document.createElement("div");
	drag.className = "div-drag";
	drag.id = "iddrag";
	drag.ondrop = this.drop.bind(this);
	drag.ondragover = this.allowDrop.bind(this);
	var j = 1;
	document.body.appendChild(drag);
	for (j = 0; j < 3; j++) {
	    var jeton = document.createElement("img");
	    jeton.id = "divdrage" + j;
	    jeton.className = "divabsolute";
	    jeton.src = "sdiv.png";
	    jeton.setAttribute("draggable", "true");
	    jeton.ondragstart = this.drag.bind(this);
	    drag.appendChild(jeton);
	}
}
	var inst = ''
onload=function(){inst = new chifukoo()}
    </script>
</head>
<body>
    <div class="plateaucadre">
        
    </div>
    <INPUT id='valideroperation' class='valideroperation' type="button" onclick="javascript:valideroperation()" title="Valider l'opération">
</body>
</html>

Afficher la suite

Votre réponse

Répondre au sujet

3 réponses

Signaler Commenter la réponse de titan3131

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 11 mai 2016 à 16:55

0

Utile

pour récupérer l'id j'ai trouvé
var element = document.getElementById(ev.target.id);
var contenu = element.innerHTML;
var idclick = element.id;
Mais pas le parent pour le moment

Signaler Commenter la réponse de jordane45

jordane45 21038 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 19 mai 2018 Dernière intervention - 11 mai 2016 à 18:04

bonjour...
heu... le code que tu nous montre peut se résumer en :

var idclick = ev.target.id;

Signaler Commenter la réponse de titan3131

titan3131 78 Messages postés vendredi 26 février 2010Date d'inscription 8 juin 2016 Dernière intervention - 11 mai 2016 à 17:30

0

Utile

pour récupérer l'id du parent j'ai trouvé
var node = document.getElementById(idclick).parentElement.id;

Votre réponse

Répondre au sujet

Posez votre question

Answer 1

Récuperer l'id d'une image et de son parent en cliquant sur l'im [Résolu]

Votre réponse

Votre réponse

Votre réponse

Vous n'êtes pas encore membre ? inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !