Html Tag Displayed In Browser Instead Rendering It

Contents hide

1 html tag displayed in browser instead rendering it

2 Solution – 1

2.1 Hi @arun

3 Solution – 2

4 Solution – 3

Problem Description:

I am using this https://codepen.io/toschivictor/pen/JjNZjEj

I need to replace icons with images,

so I replaced these icons

const items = [
    '🍭',
    '❌',
    '⛄️',
    '🦄',
    '🍌',
    '💩',
    '👻',
    '😻',
    '💵',
    '🤡',    
    '🦖',
    '🍎',
    '😂',
    '🖕',
  ];

with below code,

const items = [
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
    '<img src="image.jpg">',
];

However it is displaying the tag itself instead of showing image,

which tag or which style or which js function causing this?

Solution – 1

Hi @arun

You need to append these tag as HTML elements, not as text.

You need that:-

box.innerHTML = pool[i];

not that:-

box.textContent = pool[i];

Solution – 2

So you’ll need to make an img item and create it’s src attribute.

I’ve used a cat img API to link to the images:

(function () {
  const items = [
    'https://cataas.com/cat',
    'https://cataas.com/cat/cute',
    'https://cataas.com/cat/lolcat',
    'https://cataas.com/cat/shark',
    'https://cataas.com/cat/wakeup',
    'https://cataas.com/cat/walking',
    'https://cataas.com/cat/trapped',
    'https://cataas.com/cat/window',
    'https://cataas.com/cat/selfie',
    'https://cataas.com/cat/strange',
    'https://cataas.com/cat/fridge',
    'https://cataas.com/cat/friends',
    'https://cataas.com/cat/loaf',
    'https://cataas.com/cat/munchkin',
  ];
  const doors = document.querySelectorAll('.door');
  
  document.querySelector('#spinner').addEventListener('click', spin);
  document.querySelector('#reseter').addEventListener('click', init);

  function init(firstInit = true, groups = 1, duration = 1) {
    for (const door of doors) {
      if (firstInit) {
        door.dataset.spinned = '0';
      } else if (door.dataset.spinned === '1') {
        return;
      }

      const boxes = door.querySelector('.boxes');
      const boxesClone = boxes.cloneNode(false);
      const pool = ['❓'];

      if (!firstInit) {
        const arr = [];
        for (let n = 0; n < (groups > 0 ? groups : 1); n++) {
          arr.push(...items);
        }
        pool.push(...shuffle(arr));

        boxesClone.addEventListener(
          'transitionstart',
          function () {
            door.dataset.spinned = '1';
            this.querySelectorAll('.box').forEach((box) => {
              box.style.filter = 'blur(1px)';
            });
          },
          { once: true }
        );

        boxesClone.addEventListener(
          'transitionend',
          function () {
            this.querySelectorAll('.box').forEach((box, index) => {
              box.style.filter = 'blur(0)';
              if (index > 0) this.removeChild(box);
            });
          },
          { once: true }
        );
      }

      for (let i = pool.length - 1; i >= 0; i--) {
        if (pool.length === 1) {
          const box = document.createElement('div');
          box.classList.add('box');
          box.style.width = door.clientWidth + 'px';
          box.style.height = door.clientHeight + 'px';
          box.textContent = pool[i];
          boxesClone.appendChild(box);
        } else {
          const box = document.createElement('img');
          box.classList.add('box');
          box.style.width = door.clientWidth + 'px';
          box.style.height = door.clientHeight + 'px';
          box.src = pool[i];
          boxesClone.appendChild(box);
        }
      }
      boxesClone.style.transitionDuration = `${duration > 0 ? duration : 1}s`;
      boxesClone.style.transform = `translateY(-${door.clientHeight * (pool.length - 1)}px)`;
      door.replaceChild(boxesClone, boxes);
    }
  }

  async function spin() {
    init(false, 1, 2);
    
    for (const door of doors) {
      const boxes = door.querySelector('.boxes');
      const duration = parseInt(boxes.style.transitionDuration);
      boxes.style.transform = 'translateY(0)';
      await new Promise((resolve) => setTimeout(resolve, duration * 100));
    }
  }

  function shuffle([...arr]) {
    let m = arr.length;
    while (m) {
      const i = Math.floor(Math.random() * m--);
      [arr[m], arr[i]] = [arr[i], arr[m]];
    }
    return arr;
  }

  init();
})();

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

#app {
  width: 100%;
  height: 100%;
  background: #1a2b45;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.doors {
  display: flex;
}

.door {
  background: #fafafa;
  width: 100px;
  height: 110px;
  overflow: hidden;
  border-radius: 5px;
  margin: 5px;
}

.boxes {
  /* transform: translateY(0); */
  transition: transform 1s ease-in-out;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
}

.buttons {
  margin: 1rem 0 2rem 0;
}

button {
  cursor: pointer;
  font-size: 1.2rem;
  margin: 0 0.2rem;
  border: none;
  border-radius: 5px;
  padding: 10px 15px;
}

.info {
  position: fixed;
  bottom: 0;
  width: 100%;
  text-align: center;
}

<div id="app">
  <div class="doors">
    <div class="door">
      <div class="boxes">
        <!-- <div class="box">?</div> -->
      </div>
    </div>

    <div class="door">
      <div class="boxes">
        <!-- <div class="box">?</div> -->
      </div>
    </div>

    <div class="door">
      <div class="boxes">
        <!-- <div class="box">?</div> -->
      </div>
    </div>
  </div>

  <div class="buttons">
    <button id="spinner">Play</button>
    <button id="reseter">Reset</button>
  </div>
</div>

Solution – 3

You need to append these tag as HTML elements, not as text.

You need that:-

box.innerHTML = pool[i];

not that:-

box.textContent = pool[i];

Rate this post