Блог

В настоящее время я работаю над школьным проектом, в котором я разрабатываю веб-приложение для DotA 2, где я создал HTML-таблицу, которая должна отображать статистику конкретного героя из DotA 2 против других героев. Всего 118 символов, поэтому в таблице будет 117 строк. Эта таблица соответствия также содержит четыре столбца:

• Герой (имя героя)
• Сыгранные игры
• Процент побед
• Преимущество

Для визуального ознакомления изображение ниже близко к тому же макету, к которому я стремлюсь: (заслуга opendota.com ).

Как и на изображении выше, я также хотел бы иметь небольшой аватар с изображением вместе с именем героя в каждой строке в столбце ГЕРОЙ, например, «Void Spirit», «Rubick» и «Clockwerk».

Поскольку я не хочу вручную автозаполнять 118 строк в своем HTML-коде, я попытался разработать файл JavaScript, который сделал бы это за меня, что можно увидеть ниже:

 const matchupTableBody = document.querySelector(".matchup-table > tbody");
const numberOfHeroes = 118;

function loadMatchups() {
    for (i = 0; i < numberOfHeroes; i  ) {
        currentHero = getHero(i);
        populateMatchups(getHeroImage(currentHero));
    }
}

// Populate the table, importing the API and hero data.
function populateMatchups(heroImagePath) {

    // create new table row
    const tr = document.createElement("tr");

    // create new table cell / data
    const td = document.createElement("td");

    // load the table cell with a img tag and the heroImagePath
    td.textContent = '<img src="'   heroImagePath   '"/>';

    tr.appendChild(td);

    matchupTableBody.appendChild(tr);
}

document.addEventListener("DOMContentLoaded", () => { loadMatchups(); });
 

функция loadMatchups() загружает путь к аватару изображения героя (который я сохранил локально на своем компьютере) и отправляет этот путь к изображению в функцию populateMatchups(). Короче говоря, функция populateMatchups() создает новую строку таблицы для каждого из 117 других героев и создает новую ячейку таблицы с тегом, который указывает на путь к аватару изображения героя на моем компьютере.

Однако, похоже, это не работает при автоматической генерации этим JavaScript, как можно видеть на изображении ниже, в моей собственной таблице:

Что меня действительно смущает, так это то, что два пути, выделенные синим цветом, прекрасно работают при ручной вставке в первый элемент таблицы (первый выделенный синим цветом путь — это оранжевый парень справа в первой строке, а второй выделенный путь — красный парень слева в первом ряду). Но он не работает при генерации из моего файла JavaScript.

И я просто не могу понять, почему (хотя я новичок в JavaScript, поэтому я думаю, что проблема именно в этом). Кто-нибудь может помочь или указать мне правильное направление?

Вот мой HTML-код для таблицы:

 <div class="matchup-table-container">
        <table class="matchup-table">
            <thead>
                <tr>
                    <th>HERO</th>
                    <th>GAMES PLAYED</th>
                    <th>WIN RATE</th>
                    <th>ADVANTAGE</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><img src="ressources/images/heroes/axe_sb.png"></td>
                    <td> <img src="ressources/images/heroes/antimage_sb.png">
                    </td>
                    <td>50</td>
                    <td>
                        <img src="ressources/images/heroes/snapfire_sb.png">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
 

РЕДАКТИРОВАТЬ: к сожалению, я забыл добавить соответствующее закрытие «/ в файл JavaScript, который я опубликовал первым — я пробовал это раньше, и это не сработало, поэтому я что-то изменил и забыл изменить обратно, прежде чем публиковать здесь. Просматривая мой JavaScript через консоль браузера, я вижу, что он работает в том смысле, что все 117 тегов создаются с правильным путем к изображению, поскольку я могу скопировать путь к изображению из консоли браузера и вручную вставить его в тег, а затем он загружается.

Я думаю, проблема в том, что вы пытаетесь вставить HTML в виде текстового содержимого

Попробуйте заменить эту строку

 // load the table cell with a img tag and the heroImagePath
td.textContent = '<img src="'   heroImagePath   '">';
 

С помощью этого:

 var image = document.createElement('img');
image.setAttribute("src", heroImagePath);
td.appendChild(image);
 

или это:

 td.innerHTML = '<img src="'   heroImagePath   '">';