Как добавить массив в div?

#javascript #html

#javascript #HTML

Вопрос:

Итак, у меня возникли некоторые проблемы с загрузкой моего массива в указанную область в моем HTML, в настоящее время HTML выглядит следующим образом:

  <body>
    <div id="japan"></div>
  </body>
  <script src="Fisher-Yates.js"></script>

и мой Javascript:

 let hiragana = [あ, い, う, え, お];
let result = shuffle(hiragana);
let div = document.getElementById('japan');


for (let i = 0; i < result.length; i  ) {
     div.appendChild(result[i]);
}

Он появится в теле, если я заменю div.appendChild на document.body.appendChild вместо этого, поэтому я думаю, что часть кода должна работать, я просто не уверен, чего мне не хватает!

РЕДАКТИРОВАТЬ: я должен также упомянуть, что массив — это переменные, которые представляют собой изображения, которые я хотел бы загрузить случайным образом, это остальная часть кода:

 
    function shuffle(array) {
      var m = array.length,
        t,
        i;
      while (m) {
        i = Math.floor(Math.random() * m--);
        t = array[m];
        array[m] = array[i];
        array[i] = t;
      }
      return array;
    }

    let あ = document.createElement("img");
    あ.src = "/images/あ.png";
    //あ.setAttribute("width", "25%");

    let い = document.createElement("img");
    い.src = "/images/い.png";

    let う = document.createElement("img");
    う.src = "/images/う.png";

    let え = document.createElement("img");
    え.src = "/images/え.png";

    let お = document.createElement("img");
    お.src = "/images/お.png";

Ответ №1:

Попробуйте добавить элементы изображения в начало кода.

 let あ = document.createElement("img");
あ.src = "/images/あ.png";
//あ.setAttribute("width", "25%");

let い = document.createElement("img");
い.src = "/images/い.png";

let う = document.createElement("img");
う.src = "/images/う.png";

let え = document.createElement("img");
え.src = "/images/え.png";

let お = document.createElement("img");
お.src = "/images/お.png";

let hiragana = [あ, い, う, え, お];
let result = shuffle(hiragana);
let div = document.getElementById('japan');


for (let i = 0; i < result.length; i  ) {
  div.appendChild(result[i]);
}

function shuffle(array) {
  var m = array.length,
    t,
    i;
  while (m) {
    i = Math.floor(Math.random() * m--);
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  }
  return array;
}

 <body>
  <div id="japan"></div>
</body>
<script src="Fisher-Yates.js"></script>

Развернуть фрагмент

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

2. Так была ли проблема в порядке моего исходного кода? Ваше обновление работает! Я взволнован, но хочу убедиться, что понимаю, что я пропустил.

3. Да, я думаю, что порядок был проблемой 🙂

4. Я новичок в программировании, кажется, что большую часть времени это что-то вроде этого, и я всегда чувствую себя дураком, когда, наконец, получаю это, лол. Еще раз спасибо!

5. Рад, что смог помочь 🙂

Ответ №2:

Вместо div.appendChild(result[i]); того, чтобы вы пробовали приведенный ниже код:

  <body>
    <div id="japan"></div>
  </body>
  <script src="Fisher-Yates.js"></script>

let hiragana = [あ, い, う, え, お];
let result = shuffle(hiragana);
div = document.getElementById('japan');


for (let i = 0; i < result.length; i  ) {
    div.innerHTML = div.innerHTML   result[i];
}