Dev Faq
0
votes

Remplacer un div par une image en utilisant Javascript

J'essaye de faire un jeu de mémoire en Javascript. À cet effet, j'ai 20 div répartis sur 5 lignes, avec 4 div dans une rangée où chaque ligne est un div lui-même. Maintenant, je veux que le contenu d'un div particulier soit remplacé par une image lorsque je (l'utilisateur) clique dessus. Dans le code ci-dessous, j'ai essayé de remplacer le contenu par du texte, ce qui ne semble pas fonctionner. Ce n'est que si le contenu est remplacé par du texte avec succès, puis-je essayer avec des images.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Memory Game</title>

    <link rel="stylesheet" href="/memory-game/style.css">
</head>

<body>

    <div class="heading">
        <h2>MEMORY GAME</h2>

    </div>

    <div class="main-container" id="main">
        <div class="row" id="row1">

            <div class="element" id="element1"></div>
            <div class="element" id="element2"></div>
            <div class="element" id="element3"></div>
            <div class="element" id="element4"></div>
            <div class="element" id="element5"></div>

        </div>
        <div class="row">

            <div class="element" id="element6"></div>
            <div class="element" id="element7"></div>
            <div class="element" id="element8"></div>
            <div class="element" id="element9"></div>
            <div class="element" id="element10"></div>

        </div>
        <div class="row">

            <div class="element" id="element11"></div>
            <div class="element" id="element12"></div>
            <div class="element" id="element13"></div>
            <div class="element" id="element14"></div>
            <div class="element" id="element15"></div>

        </div>
        <div class="row">

            <div class="element" id="element16"></div>
            <div class="element" id="element17"></div>
            <div class="element" id="element18"></div>
            <div class="element" id="element19"></div>
            <div class="element" id="element20"></div>

        </div>


    </div>

    <script src="/memory-game/script.js"></script>

</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');


*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.heading{
    margin: 15px;
    padding: 10px;
}

.heading h2{
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: 30px;
    /* position: fixed; */
    font-weight: bold;
}



.main-container{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.element{
    width: 175px;
    height: 175px;
    background-color: indianred;
    margin: 20px;
    cursor: pointer;
}
const element1 = document.getElementById('element1');
const element2 = document.getElementById('element2');
const element3 = document.getElementById('element3');
const element4 = document.getElementById('element4');
const element5 = document.getElementById('element5');
const element6 = document.getElementById('element6');
const element7 = document.getElementById('element7');
const element8 = document.getElementById('element8');
const element9 = document.getElementById('element9');
const element10 = document.getElementById('element10');
const element11 = document.getElementById('element11');
const element12 = document.getElementById('element12');
const element13 = document.getElementById('element13');
const element14 = document.getElementById('element14');
const element15 = document.getElementById('element15');
const element16 = document.getElementById('element16');
const element17 = document.getElementById('element17');
const element18 = document.getElementById('element18');
const element19 = document.getElementById('element19');
const element20 = document.getElementById('element20');


element1.addEventListener('click',function() {
    element1.innerHTML = "";
    var h1 = document.createElement('h1');
    h1.innerHTML = "Hello world";
    document.getElementById('main').appendChild(h1); // removing the element and then adding another element in its place
})


element2.addEventListener('click',function() {
    element2.innerHTML = "Hello world"; // directly replacing the element
})

Maintenant, j'ai essayé 2 méthodes différentes pour remplacer le contenu. Les deux ont été mentionnés dans le code Javascript.

3 commentaires

Fonctionne selon votre code js. Utilisez .src pour charger l'image.

Le remplacement de texte (méthode 2) semble fonctionner correctement dans votre extrait de code. La méthode 1 fonctionne également, mais le nouvel élément de texte se retrouve à un endroit différent de l'écran. Vous pouvez également définir une image d'arrière-plan sur l'élément divs.

la méthode 2 ne remplace pas le texte, mais ce qu'elle fait, c'est qu'elle met le texte à l'intérieur du div, ce qui n'est pas ce que je veux.

4 Réponses :

0
votes

Vous pouvez définir des attributs de balise à l'aide de JavaScript, comme vous l'avez fait avec innerHTML :

var my_img = document.createElement("img");
my_img.src = "image.png";

(n'oubliez pas de remplacer image.png par ce dont vous avez réellement besoin)

0 commentaires
-2
votes

Soyons clairs, vous souhaitez remplacer chaque bloc par hello world lorsque vous cliquez dessus?

Si c'est ce que je pensais que c'est alors, vous changez innerHTML à innerText premier (pour ce monde bonjour atleast), puis

element1.addEventListener('click',function() {
    element1.innerText = "";
    var h1 = document.createElement('h1');
    h1.innerText = "Hello world";
    document.getElementById('element1').appendChild(h1); // removing the element and then adding another element in its place
})

En utilisant document.getElementById('main') vous faites référence à l'ensemble du document.

5 commentaires

Veuillez poster votre réponse dans un commentaire. Ce n'est pas la réponse.

innerHTML est valide aussi longtemps que le contenu est valide pour un H1

J'ai vu juste un `` bonjour le monde '', c'est pourquoi je l'ai souligné

le truc ici est que .innerHTML et .innerText ajoutent le texte à l'intérieur du div mais ne le remplacent pas.

Cela ne répond pas à la question. Une fois que vous aurez une réputation suffisante, vous pourrez commenter n'importe quel message ; à la place, fournissez des réponses qui ne nécessitent pas de clarification de la part du demandeur . - De l'avis

1
votes

Tu ne veux pas dire ça?

Je délègue depuis le conteneur principal 

  var h1 = document.createElement('h1');
  h1.innerHTML = "Hello world";
  tgt.appendChild(h1);  
  const img = new Image();
  img.src="https://via.placeholder.com/130/0000FF/808080?text=Hello+world"
  tgt.appendChild(img);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Memory Game</title>

  <link rel="stylesheet" href="/memory-game/style.css">
</head>

<body>

  <div class="heading">
    <h2>MEMORY GAME</h2>

  </div>

  <div class="main-container" id="main">
    <div class="row" id="row1">

      <div class="element" id="element1"></div>
      <div class="element" id="element2"></div>
      <div class="element" id="element3"></div>
      <div class="element" id="element4"></div>
      <div class="element" id="element5"></div>

    </div>
    <div class="row">

      <div class="element" id="element6"></div>
      <div class="element" id="element7"></div>
      <div class="element" id="element8"></div>
      <div class="element" id="element9"></div>
      <div class="element" id="element10"></div>

    </div>
    <div class="row">

      <div class="element" id="element11"></div>
      <div class="element" id="element12"></div>
      <div class="element" id="element13"></div>
      <div class="element" id="element14"></div>
      <div class="element" id="element15"></div>

    </div>
    <div class="row">

      <div class="element" id="element16"></div>
      <div class="element" id="element17"></div>
      <div class="element" id="element18"></div>
      <div class="element" id="element19"></div>
      <div class="element" id="element20"></div>

    </div>


  </div>

  <script src="/memory-game/script.js"></script>

</body>

</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.heading {
  margin: 15px;
  padding: 10px;
}

.heading h2 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  /* position: fixed; */
  font-weight: bold;
}

.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.element {
  width: 175px;
  height: 175px;
  background-color: indianred;
  margin: 20px;
  cursor: pointer;
}

Code alternatif

document.getElementById("main").addEventListener('click', function(e) {
  const tgt = e.target;
  if (!tgt.classList.contains("element")) return;
  tgt.style.backgroundImage='url(https://via.placeholder.com/130/0000FF/808080?text=Hello+world)';
})

2 commentaires

Vous devriez vérifier si e.target est un élément .element . Cliquer en dehors des tuiles le dérangera.

@MarkBaijens je le fais toujours normalement. Merci fixe

1
votes

Vous pouvez également faire une boucle sur le .element et utiliser leurs id pour appeler une image à afficher en cliquant sur

exemple de masquage / affichage de base 

<div class="heading">
  <h2>MEMORY GAME</h2>
</div>

<div class="main-container" id="main">
  <div class="row" id="row1">
    <div class="element" id="element1"></div>
    <div class="element" id="element2"></div>
    <div class="element" id="element3"></div>
    <div class="element" id="element4"></div>
    <div class="element" id="element5"></div>
  </div>
  <div class="row">
    <div class="element" id="element6"></div>
    <div class="element" id="element7"></div>
    <div class="element" id="element8"></div>
    <div class="element" id="element9"></div>
    <div class="element" id="element10"></div>
  </div>
  <div class="row">
    <div class="element" id="element11"></div>
    <div class="element" id="element12"></div>
    <div class="element" id="element13"></div>
    <div class="element" id="element14"></div>
    <div class="element" id="element15"></div>
  </div>
  <div class="row">
    <div class="element" id="element16"></div>
    <div class="element" id="element17"></div>
    <div class="element" id="element18"></div>
    <div class="element" id="element19"></div>
    <div class="element" id="element20"></div>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.heading {
  margin: 15px;
  padding: 10px;
}

.heading h2 {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  font-size: 30px;
  /* position: fixed; */
  font-weight: bold;
}

.main-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}

.element {
  width: 175px;
  height: 175px;
  background-color: indianred;
  margin: 20px;
  cursor: pointer;
}
let element = document.querySelectorAll('.element');

for (let i = 0; i < element.length; i++) {
  element[i].addEventListener("click", function() {
    if (element[i].innerHTML == "") {
    var img = document.createElement('img');
    img.src= "http://dummyimage.com/175&text="+element[i].getAttribute('id');
    element[i].appendChild(img);  
    }
    else {element[i].innerHTML="";}
  })
 }

10 commentaires

Vous voulez donc dire que cette boucle sera commune pour chaque id unique, n'est-ce pas?

non, je dis que vous pouvez utiliser un attribut, l'identifiant ou un attribut de données pour aller chercher vos images, l'identifiant ne peut être utilisé qu'une seule fois, mais un attribut de données peut avoir deux fois la même valeur dans 2 .element, vous pourrait définir au hasard les attributs de données par paires (correspondant à un fichier img) pour chaque nouveau jeu;)

voici un exemple de distribution aléatoire d'une valeur à ajouter à votre img src jsfiddle.net/gdojyprL/1 à chaque fois que vous l'exécutez, src sera différent.

Donc, ce que vous faites, c'est que vous stockez tout ce qui doit être affiché dans un tableau, puis en boucle pour l'afficher en conséquence, n'est-ce pas?

à un moment donné dans votre script, vous aurez besoin d'un tableau pour trier les tuiles correspondantes, cette idée consiste uniquement à lier img au script et évite const element1 = document.getElementById('element1'); 20 fois ;) . ici: la variable imgName existe deux fois avec la même valeur. jsfiddle.net/gdojyprL/2 il peut être utilisé pour charger une image et aussi pour voir si elle correspond à une autre tuile sur laquelle vous avez cliqué. Aucune idée d'où vous vous situez dans votre script de jeu. peut-être que j'apporte de la confusion :(

Très bien. Un autre doute que j'ai eu est que comment puis-je afficher le conteneur tel qu'il était avant après avoir cliqué et remplacé?

vous devez stocker les événements de clic, puis vérifier si les deux correspondent, sinon réinitialiser innerHTML sur "". suivez-vous un tutoriel ou créez-le à partir de zéro?

Eh bien, je construis tout seul à partir de zéro. Me recommandez-vous de suivre un tutoriel?

peut-être pas, mais peut-être dans un premier temps tout ce que le script est censé faire. compter le clic, vérifier les tuiles correspondantes, vérifier les tuiles restantes ou est-ce une victoire, un bouton de réinitialisation, etc ... Sinon, vous risquez de perdre beaucoup de temps à repenser vos bits de code / fonctions précédents

Très bien alors. Permettez-moi de clarifier les bases et j'y reviendrai. Merci pour votre aide rapide

Articles qui pourrait vous intéresser :

Impossible d'importer le module "@ angular / material"
Interaction profonde avec break and catch
Utilisation de node.js comment renommer tous les fichiers d'un dossier
Google Chrome Uncaught (promis) DOMException lors de la lecture AUDIO