javascript_series6_arry_operation

by aelgy369

HTML

<input type="text">
<button onclick="add()">新增</button>
<div id="root">
</div>

JavaScript

var todos = [
  {
    title: "倒垃圾"
  },
  {
    title: "繳電話費"
  },
  {
    title: "採買本週食材"
  },
];

const root = document.querySelector('#root')
const ul = document.createElement('ul');
root.append(ul)

function render()
{
	let str = '';
  for (let item of todos) {
  str += `
  	<li>
    	<span>${item.title}</span>
    </li>
  `
  ul.innerHTML = str;
  }
  	
}

render();

function add()
{
  
  const input = document.querySelector('input');
  // 先取出 input 的值
  // 再把值做成物件更新進去陣列中
  // 不過要變成一個物件才可以
  let item = {
  	title: input.value
  }
	todos.push(item)
  render();
  input.value = '';
}