используйте javascript для захвата текста и выравнивания по левому краю

Question

Я делаю веб-сайт с рядами изображений, и каждое изображение должно быть кликабельным с подписью слева. Я использовал встроенный javascript (я знаю, что на него смотрят свысока) в HTML с событием onclick. У меня есть js файл с некоторыми основами c javascript. Я использую файл js, чтобы добавить теги alt из изображений на левую сторону фотографий. Я новичок и скопировал код из codepen и w3schools . Когда я нажимаю на изображение, модал работает, но текст появляется как «неопределенный».

Мне нужно выяснить, как использовать javascript для отображения текста тега alt при нажатии на изображение. Это относится к каждому изображению, а не только к одному, поэтому javascript должно быть для каждой фотографии. спасибо!

изображение модала с неопределенным текстом

.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    transform: rotate(90deg);
    height: 100%;
    vertical-align: middle;
}


/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

var img = document.getElementById("img01");
var captionText = document.getElementById("caption");


function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  captionText.innerHTML = this.alt;
} 

Answer 1

Используйте element.alt для получения атрибута alt.

var img = document.getElementById("img01");
var captionText = document.getElementById("caption");


function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
  captionText.innerHTML = element.alt;
} 

Answer 2

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

Надеюсь, он вам поможет.

Answer 3

Если вы заинтересованы в отображении данных, которые не совсем совпадают с альтернативным текстом, это еще один подход, который вы могли бы рассмотреть. Если текст всегда будет соответствовать альтернативному тексту, другой ответ гораздо ближе к вашей текущей попытке.

См. Справочный материал по W3schools