Как написать HTML-код для встроенного элемента, показывающего изображение для использования на веб-странице?

Question

Я пишу свой первый код в интерактивной / последующей программе через Cengage (MindTap).Программа инструктирует меня «написать HTML-код для встроенного элемента, показывающего изображение неба для использования на веб-странице».Я должен создать переменную с именем imgStr , которая хранит эту текстовую строку:

    <img src='sd_skyMap.png' />

Где Map - это значение переменной mapNum (существует 23 файла с именами sd_sky0, sd_sky1, sd_sky3и так четвертое).В нем говорится, что с помощью оператора + можно комбинировать текстовые строки и включать одинарные кавычки в текстовые строки.

Я не могу заставить изображения неба появляться на веб-странице, чтобы спасти мою жизнь.

Я пытался пройти через репетитора, предоставленного в моем университете, но мне все еще не повезло получить изображение для показа.

    var imgStr = "<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
    sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 + 
    sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15 
    + sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 + 
    sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />";
    document.getElementById("planisphere").insertAdjacentHTML() = imgStr;

Вставив код в jshint.com, он выдал одно предупреждение и однонеиспользуемая переменная.

(Неверное назначение.)

document.getElementById ("planisphere"). InsertAdjacentHTML () = imgStr;

и mapNum - неиспользуемая переменная.

Answer 1

В вашем коде есть две проблемы, во-первых, вам нужно запустить разные файлы изображений и добавить каждый из них отдельно.В предоставленном вами коде все имена изображений объединяются в одно.

Вторая проблема заключается в использовании вами функции insertAdjacentHTML().Функция ожидает в качестве аргументов позицию нового тега и самого тега, ни один из них не передается. Проверьте здесь для лучшего объяснения.

Если у вас есть n изображений, которые вы хотите добавить в качестве n тегов, вы можете попробовать что-то вроде этого:

// variable to hold the total number of images used
var numberOfImages = 23;

// we loop trough all images, where i will count from 0 to numberOfImages
for (var i = 0; i < numberOfImages; i++) {
    // on each step of  the loop we add a new img tag with sd_skyi as source
    document.getElementById("planisphere")
        .insertAdjacentHTML('afterend', "<img src='sd_sky" + i + ".png' />")
}

Есливы используете этот отрывок как есть, он добавит 23 тега img к элементу с id planisphere.

Answer 2

Вы были почти там, просто добавьте beforeend, используя document.insertAdjacentHTML()

const imgStr = `<img src='sd_sky0 + sd_sky1 + sd_sky2 + sd_sky3 +
sd_sky4 + sd_sky5 + sd_sky6 + sd_sky7 + sd_sky8 + sd_sky9 + 
sd_sky10 + sd_sky11 + sd_sky12 + sd_sky13 + sd_sky14 + sd_sky15 
+ sd_sky16 + sd_sky17 + sd_sky18 + sd_sky19 + sd_sky20 + 
sd_sky21 + sd_sky22 + sd_sky23' + mapNum + '.png' />`;

document.getElementById("planisphere").insertAdjacentHTML('beforeend', imgStr);

<div id = "planisphere">
</div>

Answer 3

InsertAdjacentHTML принимает в качестве параметров две строки.

Первый параметр - это position, который принимает одно из четырех статических значений.

Второй параметр - это ваша HTML-строка для вставки.

Примером того, что вы хотите, может быть:

document.getElementById("planisphere").insertAdjacentHTML('afterbegin', imgStr);