Question 43133 in Html Question posted in
Some basic documentation can be found here.

add block of innerHTML with class names

I am trying to code Memory tiles games with JS, HTML and CSS. I am adding difficulty level easy(44 tile), med(66 tile), and hard(88 tile). When I select 66 , I need to add block of code to html file by DOM.

<div class="tiles" data-name="8">
  <img class="original" src="images/front-image.png" />
  <img class="shuffled" src="images/logo_8.jpg" />
</div>

I need to do this many times as for easy level, I need 16 tiles in total, for med level 32 tiles and for hard level 64 tiles.
Can anyone help me to add inner html for this?? I need to add innerHTML before section part end.

<section class="game-tiles">
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>
  <div class="tiles" data-name="2">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_2.png" />
  </div>
  <div class="tiles" data-name="2">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_2.png" />
  </div>
  <div class="tiles" data-name="3">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_3.png" />
  </div>
  <div class="tiles" data-name="3">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_3.png" />
  </div>
  <div class="tiles" data-name="4">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_4.jpg" />
  </div>
  <div class="tiles" data-name="4">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_4.jpg" />
  </div>
  <div class="tiles" data-name="5">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_5.png" />
  </div>
  <div class="tiles" data-name="5">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_5.png" />
  </div>
  <div class="tiles" data-name="6">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_6.jpg" />
  </div>
  <div class="tiles" data-name="6">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_6.jpg" />
  </div>
  <div class="tiles" data-name="7">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_7.png" />
  </div>
  <div class="tiles" data-name="7">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_7.png" />
  </div>
  <div class="tiles" data-name="8">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_8.jpg" />
  </div>
  <div class="tiles" data-name="8">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_8.jpg" />
  </div>
</section>

And the JavaScript:

const gameTiles = document.querySelector(".game-tiles");
gameTiles.insertAdjacentElement = `
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>`;

its giving me error

Tags:

2

Answers


  1. 0

    I didn’t fully understand your problem, but you should try using a loop in JavaScript to do this.

    For a better quality answer, you should separate your html, and javascript code, and give us at least the error you receive, and the expected result!

    Take for example the code below that performs the following task:
    The generateTiles function takes as parameters, the number of tiles to generate, and the number of the last assigned tile, as well as the HTML DOM element in which to add the tiles.

    function generateTiles(element, tilesCount, lastTile = 0) {
  for (let i = 0; i < tilesCount; i++) { // You run the number of tiles to add the following code
    const tileNumber = lastTile + i + 1; // You define the actual tile number to get the good Image

    const div = document.createElement('div'); // You create a div element
    div.classList.add("tiles"); // Add the 'tiles' class to it
    div.setAttribute("data-name", tileNumber); // Set the 'data-name' attribute to the number of this tile

    div.innerHTML = `
       <img class="original" src="images/front-image.png" />
       <img class="shuffled" src="images/logo_${tileNumber}.png" />`; // You append the two images you want to it

    element.append(div); // Then, you append your div to your 'tiles-container' element, so this div will be at the end of the 'tiles-container' div.
  }
}

    const tilesContainer = document.querySelector(".game-tiles");

function generateTiles(element, tilesCount, lastTile = 0) {
    for (let i = 0; i < tilesCount; i++) {
      const tileNumber = lastTile + i + 1;
      
      const div = document.createElement('div');
      div.classList.add("tiles");
      div.setAttribute("data-name", tileNumber);
      
      div.innerHTML = `
   <img class="original" src="images/front-image.png" />
   <img class="shuffled" src="images/logo_${tileNumber}.png" />`;

      element.append(div);
    }
}

// generate 6 tiles:
generateTiles(tilesContainer, 6);
    <section class="game-tiles">
</section>
    Login or Signup to reply.
  2. 0

    since insertAdjacentElement is a method you should try this syntaxe

    const gameTiles = document.querySelector(".game-tiles");
gameTiles.insertAdjacentElement(position, `
  <div class="tiles" data-name="1">
    <img class="original" src="images/front-image.png" />
    <img class="shuffled" src="images/logo_1.png" />
  </div>`);

    position argument can take some values , you can find more here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search