第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題，去搜搜看，總會(huì)有你想問的

使用javascript從輸入數(shù)組創(chuàng)建HTML列表

使用javascript從輸入數(shù)組創(chuàng)建HTML列表

雖然我在這里看到了類似的問題和解決方案，但我無(wú)法弄清楚我的代碼的問題。有人可以幫忙調(diào)查一下并告訴我我做錯(cuò)了什么。我正在嘗試使用數(shù)組函數(shù)將用戶輸入添加到列表中。我希望在用戶輸入之前數(shù)組中已經(jīng)有 3 個(gè)元素，然后使用另一種數(shù)組方法刪除添加的輸入。但首先添加輸入一直是我的挑戰(zhàn)。我已經(jīng)添加了我的代碼以供查看。    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貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊

重構(gòu)你的代碼一點(diǎn)點(diǎn)。這會(huì)是你的意思嗎？


(() => {

  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>


查看完整回答
反對(duì) 回復(fù) 2021-12-12
?
揚(yáng)帆大魚

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

我也做了一點(diǎn)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>


查看完整回答
反對(duì) 回復(fù) 2021-12-12
  • 2 回答
  • 0 關(guān)注
  • 273 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)