时间戳

首页 > 解决方案 > 从数组中获取信息并使用 JavaScript 将其写入 div

javascript - 从数组中获取信息并使用 JavaScript 将其写入 div

问题描述

这是我的 JavaScript

// info array
let myArray = [
 { hat: 'polo',
   shirt: 'buttonup',
   shoe: 'nike'
 },
 { 
   hat:  'top',
   shirt: 'pullover',
   shoe: 'addias'
 }, 
 {  
   hat: 'baseball',
   shirt: 'tshirt',
   shoe: 'flipflop'
 }, 
]

// printToDom function
const printToDom = (divId, textToPrint) => {
 const selectedDiv = document.getElementById(divId);
 selectedDiv.innerHTML = textToPrint
 };

// studentPrinter function (writes to div)
 const studentPrinter = (myArray) => {
   let domString = '';
   for (let i = 0; i < array1.length; i++) {
     domString += `<div class="col-2">${myArray[i].hat}</div>`
     domString += `<div class="col-3">${myArray[i].shirt}</div>`
     domString += `<div class="col-3">${myArray[i].shirt}</div>`
     }
     printToDom('allInfo', domstring)

// init function (starts studentPrinter)
Const init = () => {
 studentPrinter(myArray);
 };
init ();

这是我的 HTML

<div id="allInfo"></div>

我想要做的是使用该init()函数来启动该studentPrinter函数，传递myArray其中包含有关学生的信息。它应该将学生的所有信息打印到div我的 HTML 中，但由于某种原因，它没有。谁能帮我？

标签： javascripthtml

解决方案

在 for 循环中检查数组名称，条件应该是 onmyArray而不是array1

const studentPrinter = (myArray) => {
    let domString = '';
    for (let i = 0; i < myArray.length; i++) {
      domString += `<div class="col-2">${myArray[i].hat}</div>`
      domString += `<div class="col-3">${myArray[i].shirt}</div>`
      domString += `<div class="col-3">${myArray[i].shirt}</div>`
      }
      printToDom('allInfo', domstring)

此外，由于您是 Javascript 新手，我建议您使用调试器和console.log()语句来查找代码中的错误。

推荐阅读