虽然我在这里看到了类似的问题和解决方案，但我无法弄清楚我的代码的问题。有人可以帮忙调查一下并告诉我我做错了什么。我正在尝试使用数组函数将用户输入添加到列表中。我希望在用户输入之前数组中已经有 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;};
2 回答
蝴蝶不菲
TA贡献1810条经验 获得超4个赞
重构你的代码一点点。这会是你的意思吗？
(() => {
const byId = id => document.querySelector(`#${id}`);
const ordered = byId("treeList");
const appendListItem = (orderedList, itemTxt) => {
let listItem = document.createElement("li");
listItem.textContent = itemTxt;
orderedList.appendChild(listItem);
};
const addItem = () => {
const inputEl = byId("array-input");
const val = inputEl.value.trim();
if (!val) { return alert("Please enter a tree name"); }
UnsortedTrees.push(val);
appendListItem(ordered, val);
inputEl.value = "";
};
// create initial
let UnsortedTrees = ["spruce", "pine", "cedar"];
UnsortedTrees.forEach(item => appendListItem(ordered, item));
// add button handling
byId("addItem").addEventListener("click", addItem);
})();
<div id="tree-display">
<ol id="treeList"></ol>
</div>
<input id="array-input" type="text" placeholder="type a tree name">
<button id="addItem">Add</button>
扬帆大鱼
TA贡献1799条经验 获得超9个赞
我也做了一点re-factoring〜又名playing这可能有帮助/兴趣？！
<!DOCTYPE html>
<html>
<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>
添加回答
举报
0/150
提交
取消