js code realizes simple memo function

 

 

Article directory

• 1. Demand
• Two, code analysis
• Summarize

 

 

1. Demand

Enter the memo content in the page input field, click Add, add to the bottom, click the added content, delete style appears, click again to cancel.

2. Use steps

1.HTML structure

<input type="text" id="content">
    <input type="button" value="提交备忘录" id="submit">
    <ol>

    </ol>

 

2. js code

  2.1 Add the content of the input box to ol

 submit.addEventListener("click",function(){
            li=document.createElement("li");
            li.innerHTML=`${content.value}`;
            ol.appendChild(li);
            content.value="";
        });

 

 

 

 

2.2 Add and delete effects

   ol.addEventListener("click",function(event){
            event.target.className=="choose"?
            event.target.className="":event.target.className="choose";
        })

 

---

Summarize

Using event delegation event.target, there is no need to bind and listen to each child object, which is convenient~