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

Question

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

Signaler

titan3131

Messages postés: 78
Date d'inscription: vendredi 26 février 2010
Statut: Membre
Dernière intervention: 8 juin 2016

- 10 mai 2016 à 11:39
jordane45

Messages postés: 32074
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 avril 2021

- 11 mai 2016 à 18:04

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>

A voir également:

Récupérer id javascript
Recuperer l'id d'un element javascript - Meilleures réponses
Javascript parent - Meilleures réponses
Récupérer l'attribut ✓ - Forum - Javascript / DHTML
Recuperer l'id d'un element cliqué!!! ✓ - Forum - Javascript / DHTML
Recuperer l'attribut ✓ - Forum - Javascript / DHTML
Comment récupérer l'id d'une fenêtre en fonction de son nom ✓ - Forum - Javascript / DHTML
Récuperer un id en javascript - Forum - Javascript / DHTML

2 réponses

Répondre Posez votre question

titan3131 · Answer 1 · 2016-05-11T16:55:52+0200

Réponse 1 / 2

titan3131

Messages postés: 78
Date d'inscription: vendredi 26 février 2010
Statut: Membre
Dernière intervention: 8 juin 2016

11 mai 2016 à 16:55

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

jordane45

Messages postés: 32074
Date d'inscription: mercredi 22 octobre 2003
Statut: Modérateur
Dernière intervention: 14 avril 2021

345
11 mai 2016 à 18:04

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

var idclick = ev.target.id;

titan3131 · Answer 2 · 2016-05-11T17:30:41+0200

Réponse 2 / 2

titan3131

Messages postés: 78
Date d'inscription: vendredi 26 février 2010
Statut: Membre
Dernière intervention: 8 juin 2016

11 mai 2016 à 17:30

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

Votre réponse