猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

使用javascript从输入数组创建HTML列表

虽然我在这里看到了类似的问题和解决方案，但我无法弄清楚我的代码的问题。有人可以帮忙调查一下并告诉我我做错了什么。我正在尝试使用数组函数将用户输入添加到列表中。我希望在用户输入之前数组中已经有 3 个元素，然后使用另一种数组方法删除添加的输入。但首先添加输入一直是我的挑战。我已经添加了我的代码以供查看。



    var domTarget = id => {

  return document.getElementById(id);

};

var UnsortedTrees = ["spruce", "pine", "cedar"];

let ordered = document.createElement("ol");

domTarget("tree-display").appendChild(ordered);

UnsortedTrees.forEach(Unsortedtree => {

  let listOfTrees = document.createElement("li");

  ordered.appendChild(listOfTrees);

  listOfTrees.innerHTML += Unsortedtree;

});


const frontAdd = () => {

  console.log(UnsortedTrees);

  let userInput = domTarget("array-input").value;

  var isValid = true;

  if (userInput === "") {

    alert("Please enter a tree name");

    isValid = false;

  }

  if (userInput) {

    UnsortedTrees.push(userInput);

    domTarget("tree-display").reset();

    let ordered = document.createElement("ol");

    domTarget("tree-display").appendChild(ordered);

    UnsortedTrees.forEach(Unsortedtree => {

      let listOfTrees = document.createElement("li");

      ordered.appendChild(listOfTrees);

      listOfTrees.innerHTML += Unsortedtree;

    });

  }

};


window.onload = () => {

   domTarget("front-add").onclick = frontAdd;

};


喵喵时光机
浏览 309回答 2
2回答

蝴蝶不菲

重构你的代码一点点。这会是你的意思吗？(() => {&nbsp; const byId = id => document.querySelector(`#${id}`);&nbsp; const ordered = byId("treeList");&nbsp; const appendListItem = (orderedList, itemTxt) => {&nbsp; &nbsp; let listItem = document.createElement("li");&nbsp; &nbsp; listItem.textContent = itemTxt;&nbsp; &nbsp; orderedList.appendChild(listItem);&nbsp; };&nbsp; const addItem = () => {&nbsp; &nbsp; const inputEl = byId("array-input");&nbsp; &nbsp; const val = inputEl.value.trim();&nbsp;&nbsp;&nbsp; &nbsp; if (!val) { return alert("Please enter a tree name"); }&nbsp; &nbsp; UnsortedTrees.push(val);&nbsp; &nbsp; appendListItem(ordered, val);&nbsp; &nbsp; inputEl.value = "";&nbsp; };&nbsp;&nbsp;&nbsp; // create initial&nbsp; let UnsortedTrees = ["spruce", "pine", "cedar"];&nbsp; UnsortedTrees.forEach(item => appendListItem(ordered, item));&nbsp; &nbsp;&nbsp;&nbsp; // add button handling&nbsp; byId("addItem").addEventListener("click", addItem);})();<div id="tree-display">&nbsp; <ol id="treeList"></ol></div><input id="array-input" type="text" placeholder="type a tree name">&nbsp;<button id="addItem">Add</button>
0

扬帆大鱼

我也做了一点re-factoring〜又名playing这可能有帮助/兴趣？！<!DOCTYPE html><html>&nbsp; &nbsp; <head>&nbsp; &nbsp; &nbsp; &nbsp; <meta charset='utf-8' />&nbsp; &nbsp; &nbsp; &nbsp; <title>Trees in the Forest</title>&nbsp; &nbsp; &nbsp; &nbsp; <style>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; body, body *{ box-sizing:border-box;font-family:monospace }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; #forest{ width:100%; height:50vh;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .tree{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width:50px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height:80px;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; margin:0.25rem;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background:url(https://png.pngtree.com/element_our/sm/20180527/sm_5b0b21833edb1.png);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-size:contain;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-repeat:no-repeat;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-position:bottom;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color:rgba(0,200,0,0.1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ol{ width:100%; margin:1rem auto }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ol > li{display:inline-block;text-align:center}&nbsp; &nbsp; &nbsp; &nbsp; </style>&nbsp; &nbsp; &nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.addEventListener('DOMContentLoaded',()=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const domTarget=function(n){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return document.getElementById( n );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* utility to generate new DOM elements with attributes and value */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const create=function(t,a,p){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let _arr=['innerHTML','innerText','html','text'];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for( let x in a ) if( a.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, a[ x ] );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( a.hasOwnProperty('innerHTML') || a.hasOwnProperty('html') ) el.innerHTML=a.innerHTML || a.html;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( a.hasOwnProperty('innerText') || a.hasOwnProperty('text') ) el.innerText=a.innerText || a.text;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return el;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* wrapper for rebuilding the OL contents */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const createforest=function(a,p){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; p.innerHTML=''; // clear previous content&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a.sort( ( x, y )=>{ return x > y ? 1 : -1 } ) // sort the array alphabetically&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; a.forEach( tree => { create( 'li',{ text:tree, 'class':'tree', 'data-tree':tree }, p ); } ); // add each tree&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* The initial collection of trees */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let trees=[ 'spruce', 'pine', 'cedar' ];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Existing DOM elements */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let forest=domTarget('forest');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let bttn=document.querySelector('form > input[ type="button" ]');&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let ol=create( 'ol', {}, forest );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* create the initial display of trees */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createforest( trees, ol );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* Listen for button clicks - add new tree to the array and rebuild display */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; bttn.addEventListener( 'click', function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let input=this.previousElementSibling;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( input.value!='' ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( trees.length >= 3 ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* add to the array */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trees.push( input.value );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* rebuild the display */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; createforest( trees, ol );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* clear the input field */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.value='';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input.focus();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return true;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert( 'Please enter a tree name' );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* listenen for clicks on parent container */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ol.addEventListener('click',(e)=>{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if( e.target!=e.currentTarget ){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; /* remove tree from array and display */&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let tree=e.target.dataset.tree;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; trees.splice( trees.indexOf( tree ), 1 );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.target.parentNode.removeChild( e.target );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; </script>&nbsp; &nbsp; </head>&nbsp; &nbsp; <body>&nbsp; &nbsp; &nbsp; &nbsp; <div id='forest'></div>&nbsp; &nbsp; &nbsp; &nbsp; <form>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='text' />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type='button' value='Add Tree' />&nbsp; &nbsp; &nbsp; &nbsp; </form>&nbsp; &nbsp; </body></html>
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript