вывод результата в div с html в js

Question

вывод результата в div с html в js

Рейтинг: 1Ответов: 1Опубликовано: 08.06.2023

хочу запихнуть в checkOrMark знак из фавикона. подключен. все работает. в консоль когда выводишь все переменные с js - работает. а В HTML не выводится. ну и соответственно результата нет. ошибки консоль не выдает. в чем может быть проблема?

const checkOrMark = document.querySelectorAll('.checkOrMark');
const button = document.querySelectorAll('.button');

button.forEach( btn => {
  btn.addEventListener('click', function buttonAll() {
    alert('Thank You for Your order!');
  })
});

let plan = [ 
  {
    support: 'Unlimited',
    space: 5,
    user: 2,
    email: false,
    download: false
  },
  {
    support: 'Unlimited',
    space: 10,
    user: 5,
    email: true,
    download: false
  },
  {
    support: 'Unlimited',
    space: 25,
    user: 10,
    email: true,
    download: true
  }
];
let mark = `<i class="fa-solid fa-xmark"></i>`;
let check = `<i class="fa-solid fa-check"></i>`;

for (let i = 0; i < plan.length; i++) {
  const elem = plan[i];
  console.log(elem);
  let addSign = elem.download  ? check : mark;
  let symbol = `
    <div class="${addSign}">
      <p>${addSign}</p>
    </div>
  `
  console.log(symbol);
  checkOrMark.innerHTML = symbol;
};

<div class="add_photo">
    <div class="checkOrMark"></div>
    <div class="info-text">Email Integration</div>
</div>
<div class="add_photo">
    <div class="checkOrMark"></div>
    <div class="info-text">Unlimited Download</div>
</div>

javascript

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Проблема в твоем коде заключается в том, что ты используешь querySelectorAll для выбора элементов с классом "checkOrMark". Эта функция возвращает коллекцию элементов, а не отдельный элемент. Поэтому, когда ты пытаешься присвоить значение symbol с помощью innerHTML, это применяется ко всей коллекции, а не к каждому отдельному элементу.

Чтобы исправить проблему, тебе нужно перебрать каждый элемент коллекции и присвоить ему значение symbol. Вот исправленный код:

const checkOrMark = document.querySelectorAll('.checkOrMark');
const button = document.querySelectorAll('.button');

button.forEach(btn => {
  btn.addEventListener('click', function buttonAll() {
    alert('Thank You for Your order!');
  });
});

let plan = [
  {
    support: 'Unlimited',
    space: 5,
    user: 2,
    email: false,
    download: false
  },
  {
    support: 'Unlimited',
    space: 10,
    user: 5,
    email: true,
    download: false
  },
  {
    support: 'Unlimited',
    space: 25,
    user: 10,
    email: true,
    download: true
  }
];
let mark = `<i class="fa-solid fa-xmark"></i>`;
let check = `<i class="fa-solid fa-check"></i>`;

for (let i = 0; i < plan.length; i++) {
  const elem = plan[i];
  console.log(elem);
  let addSign = elem.download ? check : mark;
  let symbol = `
    <div class="${addSign}">
      <p>${addSign}</p>
    </div>
  `;
  console.log(symbol);
  checkOrMark[i].innerHTML = symbol;
}

Теперь checkOrMark[i].innerHTML = symbol будет присваивать значение symbol каждому отдельному элементу в коллекции.

вывод результата в div с html в js

Ответы