使用javascript从输入数组创建HTML列表
虽然我在这里看到了类似的问题和解决方案，但我无法用我的代码找出问题所在。请有人帮我调查一下，告诉我什么地方做得不对。 我正在尝试使用数组函数将用户输入添加到列表中。我希望在用户输入之前数组中已经有3个元素，然后用另一个数组方法删除添加的输入。但首先添加输入是我的挑战。我已经添加了查看代码使用javascript从输入数组创建HTML列表,javascript,html,arrays,dom,Javascript,Html,Arrays,Dom,虽然我在这里看到了类似的问题和解决方案，但我无法用我的代码找出问题所在。请有人帮我调查一下，告诉我什么地方做得不对。 我正在尝试使用数组函数将用户输入添加到列表中。我希望在用户输入之前数组中已经有3个元素，然后用另一个数组方法删除添加的输入。但首先添加输入是我的挑战。我已经添加了查看代码 var domTarget = id => { return document.getElementById(id); }; var UnsortedTrees = ["spruce", "
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;
};
稍微重构一下代码。这就是你的意思吗
（（）=>{
const byId=id=>document.querySelector（`${id}`）；
const ordered=byId（“树列表”）；
const appendListItem=（orderedList，itemTxt）=>{
让listItem=document.createElement（“li”）；
listItem.textContent=itemTxt；
orderedList.appendChild（listItem）；
};
常量附加项=（）=>{
常量输入=字节ID（“数组输入”）；
const val=inputEl.value.trim（）；
如果（！val）{返回警报（“请输入树名”）；}
未分类树推送（val）；
appendListItem（已订购，val）；
inputEl.value=“”；
};
//创建首字母
让未分类的树木=[“云杉”、“松树”、“雪松”]；
forEach（item=>appendListItem（ordered，item））；
//添加按钮处理
byId（“addItem”）。addEventListener（“单击”，addItem）；
})();
添加
我也做了一点播放<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8' />
<title>Trees in the Forest</title>
<style>
body, body *{ box-sizing:border-box;font-family:monospace }
#forest{ width:100%; height:50vh;}
.tree{
width:50px;
height:80px;
margin:0.25rem;
background:url(https://png.pngtree.com/element_our/sm/20180527/sm_5b0b21833edb1.png);
background-size:contain;
background-repeat:no-repeat;
background-position:bottom;
background-color:rgba(0,200,0,0.1)
}
ol{ width:100%; margin:1rem auto }
ol > li{display:inline-block;text-align:center}
</style>
<script>
document.addEventListener('DOMContentLoaded',()=>{
const domTarget=function(n){
return document.getElementById( n );
};
/* utility to generate new DOM elements with attributes and value */
const create=function(t,a,p){
let el = ( typeof( t )=='undefined' || t==null ) ? document.createElement( 'div' ) : document.createElement( t );
let _arr=['innerHTML','innerText','html','text'];
for( let x in a ) if( a.hasOwnProperty( x ) && !~_arr.indexOf( x ) ) el.setAttribute( x, a[ x ] );
if( a.hasOwnProperty('innerHTML') || a.hasOwnProperty('html') ) el.innerHTML=a.innerHTML || a.html;
if( a.hasOwnProperty('innerText') || a.hasOwnProperty('text') ) el.innerText=a.innerText || a.text;
if( p!=null ) typeof( p )=='object' ? p.appendChild( el ) : document.getElementById( p ).appendChild( el );
return el;
};
/* wrapper for rebuilding the OL contents */
const createforest=function(a,p){
p.innerHTML=''; // clear previous content
a.sort( ( x, y )=>{ return x > y ? 1 : -1 } ) // sort the array alphabetically
a.forEach( tree => { create( 'li',{ text:tree, 'class':'tree', 'data-tree':tree }, p ); } ); // add each tree
};
/* The initial collection of trees */
let trees=[ 'spruce', 'pine', 'cedar' ];
/* Existing DOM elements */
let forest=domTarget('forest');
let bttn=document.querySelector('form > input[ type="button" ]');
let ol=create( 'ol', {}, forest );
/* create the initial display of trees */
createforest( trees, ol );
/* Listen for button clicks - add new tree to the array and rebuild display */
bttn.addEventListener( 'click', function(e){
let input=this.previousElementSibling;
if( input.value!='' ){
if( trees.length >= 3 ){
/* add to the array */
trees.push( input.value );
/* rebuild the display */
createforest( trees, ol );
/* clear the input field */
input.value='';
input.focus();
}
return true;
}
alert( 'Please enter a tree name' );
});
/* listenen for clicks on parent container */
ol.addEventListener('click',(e)=>{
if( e.target!=e.currentTarget ){
/* remove tree from array and display */
let tree=e.target.dataset.tree;
trees.splice( trees.indexOf( tree ), 1 );
e.target.parentNode.removeChild( e.target );
}
});
})
</script>
</head>
<body>
<div id='forest'></div>
<form>
<input type='text' />
<input type='button' value='Add Tree' />
</form>
</body>
</html>
森林中的树木
正文，正文*{框大小：边框框；字体系列：monospace}
#森林{宽度：100%；高度：50vh；}
.树{
宽度：50px；
高度：80px；
保证金：0.25雷姆；
背景：url(https://png.pngtree.com/element_our/sm/20180527/sm_5b0b21833edb1.png);
背景尺寸：包含；
背景重复：无重复；
背景位置：底部；
背景色：rgba（0200,0,0.1）
}
ol{宽度：100%；边距：1rem auto}
ol>li{显示：内联块；文本对齐：中心}
document.addEventListener（'DOMContentLoaded'，（）=>{
const domTarget=函数（n）{
返回文档.getElementById（n）；
};
/*用于生成具有属性和值的新DOM元素的实用工具*/
const create=函数（t，a，p）{
设el=（typeof（t）='undefined'| | t==null）？document.createElement（'div'）：document.createElement（t）；
让_arr=['innerHTML'，'innerText'，'html'，'text']；
对于（设a中的x）if（a.hasOwnProperty（x）和&&&&&&&～（u arr.indexOf（x））el.setAttribute（x，a[x]）；
如果（a.hasOwnProperty（'innerHTML'）| | a.hasOwnProperty（'html'））el.innerHTML=a.innerHTML | | a.html；
如果（a.hasOwnProperty（'innerText'）| | a.hasOwnProperty（'text'））el.innerText=a.innerText | | a.text；
如果（p！=null）typeof（p）='object'？p.appendChild（el）：document.getElementById（p）.appendChild（el）；
返回el；
};
/*用于重新生成OL内容的包装器*/
const createforest=函数（a，p）{
p、 innerHTML=''；//清除以前的内容
a、 排序（（x，y）=>{return x>y？1:-1}）//按字母顺序对数组排序
a、 forEach（tree=>{create（'li'，{text:tree，'class'：'tree'，data tree'：tree}，p）；}）；//添加每个树
};
/*最初收集的树木*/
让树木=[‘云杉’、‘松树’、‘雪松’]；
/*现有DOM元素*/
let forest=domTarget（'forest'）；
让bttn=document.querySelector（'form>input[type=“button”]”）；
设ol=create（'ol'，{}，林）；
/*创建树的初始显示*/
createforest（树，ol）；
/*侦听按钮单击-将新树添加到阵列并重建显示*/
bttn.addEventListener（'click'，函数（e）{
让输入=this.previousElementSibling；
如果（输入值！=''）{
如果（trees.length>=3）{
/*添加到数组中*/
trees.push（input.value）；
/*重建显示器*/
createforest（树，ol）；
/*清除输入字段*/
输入值=“”；
input.focus（）；
}
返回true；
}
警报（“请输入树名”）；
});
/*单击父容器的列表*/
ol.addEventListener（'单击'，（e）=>{
如果（e.target！=e.currentTarget）{
/*从数组中删除树并显示*/
让tree=e.target.dataset.tree；
树.拼接（树.树的索引，1）；
e、 target.parentNode.removeChild（e.target）；
}
});
})
纯javascript