SetAttribute для img с использованием объекта

Новичок в Javascript. Это программа, похожая на карточку, которая должна иметь изображения, а затем вы угадываете имя. Я использую setAttribute, но изображения не заполняют страницу. Должен ли я выполнять цикл for, чтобы выбрать изображение, или я просто делаю то, что сделал? Мне нужно использовать setAttribute, но я не понимаю, почему изображения не заполняются. Был бы очень признателен за помощь.

function populateImages() {
  var newDiv = document.createElement('div');
  newDiv.setAttribute('class', 'frame');
  newDiv.setAttribute('src', personArray.url);
  newDiv.setAttribute('onclick', 'promptForName(this)');
  newDiv.setAttribute('onmouseover', 'styleIt(this)');
  newDiv.setAttribute('onmouseout', 'unStyleIt(this)');
  newDiv.setAttribute('id', '1');
  document.getElementById('pic-grid').appendChild(newDiv);
}

Вот мой JS-бин

У вас есть кавычки вокруг personArray.url. Это сделало бы его строкой, а не объектом

— 08.04.2019 05:35

Если вы хотите увидеть изображение, используйте тег изображения: <img src='blah.url' />

— 08.04.2019 05:35

javascript

08.04.2019 05:32

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

var currentId = "";
var x = 0;
var y = 0;

var personArray = [{
    firstname: "Ann",
    url: "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "Jane",
    url: "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "John",
    url: "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  },
  {
    firstname: "Joe",
    url: "http://www.tuktukdesign.com/wp-content/uploads/2017/12/person-icon.jpg"
  }
];


function populateImages() {
  for (var i = 0; i < personArray.length; i++) {
    var newDiv = document.createElement('img');
    newDiv.setAttribute('class', 'frame');
    newDiv.setAttribute('src', personArray[i].url);
    newDiv.setAttribute('onclick', 'promptForName(this)');
    newDiv.setAttribute('onmouseover', 'styleIt(this)');
    newDiv.setAttribute('onmouseout', 'unStyleIt(this)');
    newDiv.setAttribute('id', '1');
    document.getElementById('pic-grid').appendChild(newDiv);
  }
}

function promptForName(element) {
  document.getElementById('response').value = "";
  document.getElementById('message').innerHTML = "";
  document.getElementById('prompt').style.display = 'block';
  currentId = element.id;
  x = element.offsetLeft;
  y = element.offsetTop;
  x = x + 20;
  y = y + 20;
  document.getElementById('prompt').style.position = "absolute";
  document.getElementById('prompt').style.top = y;
  document.getElementById('prompt').style.left = x;
  document.getElementById('response').focus();
}

function styleIt(element) {
  element.parentNode.style.backgroundColor = 'aqua';

}

function unStyleIt(element) {
  element.parentNode.style.backgroundColor = 'white';

}

function checkAnswer() {
  if (document.getElementById('response').value == personArray[currentId].firstname) {

    document.getElementById(currentId).className = "opClass";
    document.getElementById(currentId).removeAttribute("onclick");
    document.getElementById(currentId).removeAttribute("onmouseover");

    var divVar = document.createElement('div');
    divVar.setAttribute('id', currentId + 'name');
    document.getElementById('pic-grid').appendChild(divVar);
    var textNode = document.createTextNode(personArray[currentId].firstname);
    divVar.appendChild(textNode);
    document.getElementById(currentId + 'name').style.position = "absolute";
    document.getElementById(currentId + 'name').style.top = y;
    document.getElementById(currentId + 'name').style.left = x;

    document.getElementById('prompt').style.display = 'none';
    document.getElementById(currentId).parentNode.style.backgroundColor = 'white';
    document.getElementById('response').value = "";
    document.getElementById('message').innerHTML = "";
  } else {
    if (document.getElementById('message').innerHTML == "Wrong!") {
      document.getElementById('message').innerHTML = "Incorrect answer!"
    } else {
      document.getElementById('message').innerHTML = "Wrong!"
    }
  }
  return false;
}

body,
header {
  text-align: center;
  font-family: arial;
  font-size: 1em;
  background-color: silver;
}

.frame {
  padding: 25px;
  background-color: white;
  border: solid 1px black;
  display: inline-block;
}

#prompt {
  background-color: aqua;
  padding: 10px;
  display: none;
}

img {
  cursor: pointer;
}

.opClass {
  opacity: 0.4;
  filter: alpha(opacity=40);
  /* For IE8 and earlier */
  cursor: default;
}

<body onload = "populateImages()">
  <header>
    <h2>Class Flashcards</h2>
    <h3>Click on a student to guess their name</h3>
  </header>

  <div id = "pic-grid">
  </div>

  <div id = "prompt">
    What is this student's name?<br />
    <form onsubmit = "return checkAnswer()">
      <input type = "text" id = "response" name = "quizInput">
    </form>
    <div id = "message"></div>
  </div>
</body>

08.04.2019 05:44

Другие вопросы по теме

Какая более короткая запись для этого в последнем JavaScript?

JavaScript Blogger не загружает формат css

Как работают обещания и цепочка обещаний? [Проблема с кодом]

Ошибка при использовании npm для установки разветвленного репозитория в качестве зависимости

Как отобразить массив firestore с пробелом между элементами

Проверить значение объекта

Как пройтись по массиву объектов и отфильтровать элементы, находящиеся в один и тот же час

JQuery/Javascript анимировать div, уменьшить и снова увеличить

Как показать текстовое поле, когда значение из поля со списком выбрано для более чем одного

Вызвать событие на определенном уровне масштабирования

SetAttribute для img с использованием объекта

Ответы 1

Другие вопросы по теме

Похожие вопросы