如何将动态项目从数组打印到DOM

时间：2019-06-04 21:35:33

标签： javascript html arrays

我陷入了逻辑问题。

我有一个数组，我在其中使用array.push()堆叠项目，这些项目来自用户的输入。 现在的问题是： 如何将这些项目打印到DOM？我正在使用ATM，

    function getInput(operator, description, value) {
      // SAVE IN INCOME IF "+" IS CHOOSEN (DEFAULT)
      if (addType.value == 'inc') {
        let op = incomeArr['operator'] = operator;
        let des = incomeArr['description'] = description;
        let val = incomeArr['value'] = value;
        incomeArr.push([op, des, val]);

        return incomeArr;
      }
    }

在getInput();中创建关联数组 第一次尝试将此数据打印到DOM中，如下所示：

function printToDOM(item) {
  // every function call should run this once to update the UI
  const incomeList = document.querySelector('.income__list');
  const expenseList = document.querySelector('.expenses__list');

  let incomeItemSpan = `<span> ${item.description}: ${item.value} </span></br>`;
  let expenseItemSpan = `<span> ${item.description}: ${item.value} </span> </br>`;


  for (var i = 0; i < expenseArr.length; i++) {
      incomeItemSpan;
      incomeList.append(incomeItemSpan);
    }
}

我的问题是我的forLoop索引条件由于“每次函数调用”而混乱，在下一个函数调用中，打印出的值将被打印两次。索引再次从0开始，即使使用功能外循环计数器也无法正常工作。

[！[gave-input] [1]] [1]

所以下一次尝试是：

function printToDOM(item) {
  // every function call should run this once to update the UI
  const incomeList = document.querySelector('.income__list');
  const expenseList = document.querySelector('.expenses__list');

  let incomeItemSpan = `<span> ${item.description}: ${item.value} </span></br>`;
  let expenseItemSpan = `<span> ${item.description}: ${item.value} </span> </br>`;

  incomeArr.forEach(() => {
    incomeList.innerHTML = incomeItemSpan;
  });
}

我用forEach尝试过，这里的问题是，我完全不知道如何在没有innerHTML的情况下打印出incomeItemSpan。我想要从上到下堆叠的DOM中的项目列表，每一行都是数组中的新项目，就像我将使用item.append()一样，但是HTML无法在append（）中工作。

我该怎么做？

/* TODO:
  - Add Eventlistener for Submit a +/- Value
  - if + {add 1. into INCOME section} + Set INCOME in header to the amount
  of all incomes added
  if - {same like if+ just for -}
  - create a update DOM function to update the visualisation of the calculations
  - INCOME AND EXPENSES should be a Array
  - add a prototype function to remove entrys from INCOME and EXPENSES, use
  indexOf to get the index item and remove with array.splice().
  - calc every expense  with INCOME to get a % value of how much this entry is
  % related to the max INCOME
*/

// VARS:
let addType = document.querySelector('.add__type');
let description = document.querySelector('.add__description');
let addValue = document.querySelector('.add__value');
let incomeArr = [];
let expenseArr = [];


// EVENTLISTENER Constructor:
function EventListner(selector, listner, fnt) {
  this.selector = selector;
  this.listner = listner;
  this.fnt = fnt;
  document.querySelector(selector).addEventListener(listner, fnt);
};

// getInput VALUES FROM USER Constructor:
function getInput(operator, description, value) {
  // SAVE IN INCOME IF "+" IS CHOOSEN (DEFAULT)
  if (addType.value == 'inc') {
    let op = incomeArr['operator'] = operator;
    let des = incomeArr['description'] = description;
    let val = incomeArr['value'] = value;
    incomeArr.push([op, des, val]);

    // TODO: WHAT AFTER SAVING?
    return incomeArr;
  }
  // SAVE IN EXPENSE IF "-" IS CHOOSEN
  if (addType.value == 'exp') {
    let op = expenseArr['operator'] = operator;
    let des = expenseArr['description'] = description;
    let val = expenseArr['value'] = value;
    expenseArr.push([op, des, val]);

    // TODO: WHAT AFTER SAVING?
    return expenseArr;
  }

};

// STUCK AS FUCK!

function printToDOM(item) {
  // every function call should run this once to update the UI
  const incomeList = document.querySelector('.income__list');
  const expenseList = document.querySelector('.expenses__list');

  let incomeItemSpan = `<span> ${item.description}: ${item.value} </span></br>`;
  let expenseItemSpan = `<span> ${item.description}: ${item.value} </span> </br>`;

  incomeArr.forEach(() => {
    incomeList.innerHTML = incomeItemSpan;
  });

  // for (var i = 0; i < incomeArr.length; i++) {
  //   console.log([i]);
  //   incomeItemSpan;
  //   incomeList.append(incomeItemSpan);
  // }

  // console.log(incomeItemSpan);
  //

  // incomeList.append(expenseArr);
  // incomeArr.toString();
  // expenseArr.toString();
  // incomeList.innerHTML = incomeItemSpan;


};




const main = (function() {
  // EVENTLISTENERS
  const clickListener = new EventListner('.add__btn', 'click', () => {
    if (description.value == '' || addValue.value == '') {
      // MAKE SURE DESCRIPTION AND VALUE IS NOT EMPTY
      alert('description and value can\'t be empty');
      return;
    }
    getInput(addType.value, description.value, addValue.value);
  });


  const enterKeyListener = new EventListner('.add__value', 'keypress', (e) => {
    let testArray = [];
    for (var i = 0; i < testArray.length; i++) {
      testArray[i] = [i];
      console.log(testArray[i]);
    }
    testArray.push('item');

    if (e.keyCode == 13) {
      if (description.value == '' || addValue.value == '') {
        // MAKE SURE DESCRIPTION AND VALUE IS NOT EMPTY
        alert('description and value can\'t be empty');
        return;
      }
      // ON ENTER SAVE VALUES IN AN ARRAY
      // IF PLUS INTO incomeArr, ON MINUS INTO expenseArr
      // getInput(addType.value, description.value, addValue.value);
      printToDOM(getInput(addType.value, description.value, addValue.value));
    }
  });


}());

//
/**********************************************
*** GENERAL
**********************************************/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

body {
    color: #555;
    font-family: Open Sans;
    font-size: 16px;
    position: relative;
    height: 100vh;
    font-weight: 400;
}

.right { float: right; }
.red { color: #FF5049 !important; }
.red-focus:focus { border: 1px solid #FF5049 !important; }

/**********************************************
*** TOP PART
**********************************************/

.top {
    height: 40vh;
    background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(back.png);
    background-size: cover;
    background-position: center;
    position: relative;
}

.budget {
    position: absolute;
    width: 350px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
}

.budget__title {
    font-size: 18px;
    text-align: center;
    margin-bottom: 10px;
    font-weight: 300;
}

.budget__value {
    font-weight: 300;
    font-size: 46px;
    text-align: center;
    margin-bottom: 25px;
    letter-spacing: 2px;
}

.budget__income,
.budget__expenses {
    padding: 12px;
    text-transform: uppercase;
}

.budget__income {
    margin-bottom: 10px;
    background-color: #28B9B5;
}

.budget__expenses {
    background-color: #FF5049;
}

.budget__income--text,
.budget__expenses--text {
    float: left;
    font-size: 13px;
    color: #444;
    margin-top: 2px;
}

.budget__income--value,
.budget__expenses--value {
    letter-spacing: 1px;
    float: left;
}

.budget__income--percentage,
.budget__expenses--percentage {
    float: left;
    width: 34px;
    font-size: 11px;
    padding: 3px 0;
    margin-left: 10px;
}

.budget__expenses--percentage {
    background-color: rgba(255, 255, 255, 0.2);
    text-align: center;
    border-radius: 3px;
}


/**********************************************
*** BOTTOM PART
**********************************************/

/***** FORM *****/
.add {
    padding: 14px;
    border-bottom: 1px solid #e7e7e7;
    background-color: #f7f7f7;
}

.add__container {
    margin: 0 auto;
    text-align: center;
}

.add__type {
    width: 55px;
    border: 1px solid #e7e7e7;
    height: 44px;
    font-size: 18px;
    color: inherit;
    background-color: #fff;
    margin-right: 10px;
    font-weight: 300;
    transition: border 0.3s;
}

.add__description,
.add__value {
    border: 1px solid #e7e7e7;
    background-color: #fff;
    color: inherit;
    font-family: inherit;
    font-size: 14px;
    padding: 12px 15px;
    margin-right: 10px;
    border-radius: 5px;
    transition: border 0.3s;
}

.add__description { width: 400px;}
.add__value { width: 100px;}

.add__btn {
    font-size: 35px;
    background: none;
    border: none;
    color: #28B9B5;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.1;
    margin-left: 10px;
}

.add__btn:active { transform: translateY(2px); }

.add__type:focus,
.add__description:focus,
.add__value:focus {
    outline: none;
    border: 1px solid #28B9B5;
}

.add__btn:focus { outline: none; }

/***** LISTS *****/
.container {
    width: 1000px;
    margin: 60px auto;
}

.income {
    float: left;
    width: 475px;
    margin-right: 50px;
}

.expenses {
    float: left;
    width: 475px;
}

h2 {
    text-transform: uppercase;
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 15px;
}

.icome__title { color: #28B9B5; }
.expenses__title { color: #FF5049; }

.item {
    padding: 13px;
    border-bottom: 1px solid #e7e7e7;
}

.item:first-child { border-top: 1px solid #e7e7e7; }
.item:nth-child(even) { background-color: #f7f7f7; }

.item__description {
    float: left;
}

.item__value {
    float: left;
    transition: transform 0.3s;
}

.item__percentage {
    float: left;
    margin-left: 20px;
    transition: transform 0.3s;
    font-size: 11px;
    background-color: #FFDAD9;
    padding: 3px;
    border-radius: 3px;
    width: 32px;
    text-align: center;
}

.income .item__value,
.income .item__delete--btn {
    color: #28B9B5;
}

.expenses .item__value,
.expenses .item__percentage,
.expenses .item__delete--btn {
    color: #FF5049;
}


.item__delete {
    float: left;
}

.item__delete--btn {
    font-size: 22px;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    display: none;
}

.item__delete--btn:focus { outline: none; }
.item__delete--btn:active { transform: translateY(2px); }

.item:hover .item__delete--btn { display: block; }
.item:hover .item__value { transform: translateX(-20px); }
.item:hover .item__percentage { transform: translateX(-20px); }


.unpaid {
    background-color: #FFDAD9 !important;
    cursor: pointer;
    color: #FF5049;

}

.unpaid .item__percentage { box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1); }
.unpaid:hover .item__description { font-weight: 900; }
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,600" rel="stylesheet" type="text/css">
  <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" type="text/css">
  <link type="text/css" rel="stylesheet" href="style.css">
  <title>Budgety</title>
</head>

<body>

  <div class="top">
    <div class="budget">
      <div class="budget__title">
        Available Budget in <span class="budget__title--month">%Month%</span>:
      </div>

      <div class="budget__value">+ 0</div>

      <div class="budget__income clearfix">
        <div class="budget__income--text">Income</div>
        <div class="right">
          <div class="budget__income--value">+ 0</div>
          <div class="budget__income--percentage">&nbsp;</div>
        </div>
      </div>

      <div class="budget__expenses clearfix">
        <div class="budget__expenses--text">Expenses</div>
        <div class="right clearfix">
          <div class="budget__expenses--value">- 0</div>
          <div class="budget__expenses--percentage">0%</div>
        </div>
      </div>
    </div>
  </div>



  <div class="bottom">
    <div class="add">
      <div class="add__container">
        <select class="add__type">
          <option value="inc" selected>+</option>
          <option value="exp">-</option>
        </select>
        <input type="text" class="add__description" placeholder="Add description">
        <input type="number" class="add__value" placeholder="Value">
        <button class="add__btn"><i class="ion-ios-checkmark-outline"></i></button>
      </div>
    </div>

    <div class="container clearfix">
      <div class="income">
        <h2 class="icome__title">Income</h2>

        <div class="income__list">


                        <!-- <div class="item clearfix" id="income-0">
                            <div class="item__description"></div>
                            <div class="right clearfix">
                                <div class="item__value"></div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="item clearfix" id="income-1">
                            <div class="item__description">Sold car</div>
                            <div class="right clearfix">
                                <div class="item__value">+ 1,500.00</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div> -->


        </div>
      </div>



      <div class="expenses">
        <h2 class="expenses__title">Expenses</h2>

        <div class="expenses__list">

          <!--
                        <div class="item clearfix" id="expense-0">
                            <div class="item__description">Apartment rent</div>
                            <div class="right clearfix">
                                <div class="item__value">- 900.00</div>
                                <div class="item__percentage">21%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>

                        <div class="item clearfix" id="expense-1">
                            <div class="item__description">Grocery shopping</div>
                            <div class="right clearfix">
                                <div class="item__value">- 435.28</div>
                                <div class="item__percentage">10%</div>
                                <div class="item__delete">
                                    <button class="item__delete--btn"><i class="ion-ios-close-outline"></i></button>
                                </div>
                            </div>
                        </div>
                        -->

        </div>
      </div>
    </div>
  </div>
  <script src="app.js"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

这正是您想要的吗？

const arr = new Array();

function addList() {
  const el = document.querySelector("input[name=user]")
  const val = el.value
  arr.push(val);
  el.value = null;

  return false;
}

function showList() {
  for (let i = 0; i < arr.length; i++) {
    const listElement = document.createElement("li");
    listElement.textContent = arr[i]
    document.body.appendChild(listElement);
  }
}
<form onsubmit="return addList()">
  <input type="text" name="user">
  <button>Add list item</button>
</form><br>

<button class="showList" onclick="showList()">Show list</button>
    
<ul class="list"></ul>

答案 1 :(得分：0)

要创建项目列表，请创建一个有序/无序列表，然后将每个项目追加到forEach中的此列表中，最后将html设置为有序//无序列表。 示例：

var ol=$('<ol></ol>');
incomeArr.forEach(() =>  {
  ol.append($('<li></li>').text(`${item.description}: ${item.value}`));
});

$('#display').html(ol);
相关问题
最新问题