Discussion :

[NICOLAS7A]

Bonjour,

je suis face as un problème, je souhaite récupéré et cloner un bout de code html et ensuite être réafficher dans une pop up en claire ( j'ai un système de carte que l'on peut partager a l'aide d'un bouton qui lui déclencher une pop-up et j'aurai voulu que l’élément que je souhaite partager cet a dire la carte soit afficher dans la pop up comme un système de visualisation avec une class différente pour pouvoir modifier sa taille

code html ( les 2 cartes sont la face et le dos que je souhaite cloner, as savoir que des carte je peut en avoir beaucoup et que je cible juste la face et le dos a chaque fois )

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
  <div class="list-cards-family" id="13">
 
<button id='openModal' onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
 
<div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
 
        </div>
 
 
 
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
 
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>

merci d'avance

[Invité]

Bonjour, et bienvenu sur DVP.

1- "bescherelle"

2- qu'est-on censé faire avec ton bout de code ?

Pour récupérer / ré-afficher du code HTML :

• innerHTML
• textContent

Pour sélectionner un élément :

• document.getElementById()
• document.querySelector()
• document.querySelectorAll()

[NICOLAS7A]

2- je suis novice dans le javascript et j'aurai voulu savoir qu'elle est le code javascript pour répondre a mon besoin
a savoir que je souhaite que quand l'on clic sur le bouton partager le java récupéré la balise div qui en-dessous pour ensuite la ré-afficher
j'ai passer ma longue journée hier sans résultat.


merci quand même.

[Invité]

Alors montre ce que tu as fait.

[NICOLAS7A]

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="list-cards">
    <div class="list-cards-family" id="13">
            <button  onclick="openModal()" class="mdc-icon-button material-icons mdc-card__action mdc-card__action--icon mdc-ripple-upgraded--unbounded mdc-ripple-upgraded" title="Share" data-mdc-ripple-is-unbounded="true"  style=" position:relative; right:0; top:0; z-index:10;    border-radius: 50px;top: 5px;color: #828282; --mdc-ripple-fg-size:28px; --mdc-ripple-fg-scale:1.71429; --mdc-ripple-left:10px; --mdc-ripple-top:10px;">share</button>
      <div class="cards"  data-tilt data-tilt-glare data-tilt-max-glare="0.8" style="position:relative;">
 
        <div class="card-categorie">Categorie 1  
 
        </div>
 
              <div class="card-div-title">
 
<h1 class="Card-title">Design UX</h1>
 
 
    </div>
    <div class="card-body">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
          sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
        </p>
 
    </div>
 
    </div>
 
    <div class="cards" data-tilt data-tilt-glare data-tilt-max-glare="0.8">
 
         <div class="card-categorie">Categorie 1
              <div class="card-pagination">1/50</div>
                </div>
 
            <div class="card-div-title">
 
        <h1 class="Card-title">Design UX</h1>
 
 
            </div>
            <div class="card-body">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.  Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
                </p>
            </div>
 
            </div>
 
        </div>

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function newFunction() {
    var l1 = document.getElementById("#13");
    var l2 = l1.childNodes;
    $(document).ready(function () {
        var cloned = $("l2").clone().appendTo($("#modal"));
    });}

[Invité]

Bonjour,

1- il faut apprendre la syntaxe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("13"); // JavaScript

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelector("#13"); // JavaScript

ou

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#13"); // jQuery

2- tu utilises 2 syntaxes différentes : JavaScript et jQuery.

• En as-tu conscience ?
• Est-ce volontaire ?

3- Ne jamais hésiter à faire une recherche quand on a un doute ou qu'on ne sait pas.
C'est comme ça qu'on progresse.