JavaScript - HTML - Textarea 元素的问题

Posted 2023-05-07

【中文标题】JavaScript - HTML - Textarea 元素的问题

【英文标题】：JavaScript - HTML - Issues With Textarea Element

【发布时间】：2021-12-26 09:34:40

【问题描述】：

let fruits = [
  id: 0, name: 'Apple',
  id: 1, name: 'Orange',
  id: 2, name: 'Banana',
  id: 3, name: 'Strawberry'
]




let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')


function addItems()
  let fruitItem = ''
  let position = 'beforeend'

  for(let fruit of fruits)

    fruitItem = `<li id='$fruit.id' class="item">
        <p id="$fruit.id" class="fruits">$fruit.name</p>
    </li>`

    list.insertAdjacenthtml(position, fruitItem)
  




list.addEventListener('click', (event)=>
  //add_to_note_box.push()
  let materialSelected = event.target.classList.value
  if(materialSelected === 'fruits')
      add_to_note_box.push(fruits[event.target.id].name)
      
    
  if(event.target.style.backgroundColor === "")
    event.target.style.backgroundColor = '#3498DB'
  else
    event.target.style.backgroundColor = null
  

)


createTextBoxBtn.addEventListener('click', ()=>
  if(add_to_note_box.length === 0)
    alert('Nothing to add to the notebox')
  else
    let items = ''


    for(let text of add_to_note_box)

noteList.textContent = text
    

    add_to_note_box = []
  
)

copyTextBtn.addEventListener('click', ()=>

  if(!noteList.textContent)
    alert('There is nothing to copy')
  else
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>
    copyTextBtn.textContent = 'Copy Text'
  , 2000)
  


)



addItems()

*
  margin: 0;
  padding: 0;
  box-sizing: border-box;



body
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;


.parent-container
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;


.create_notbox_container
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;


.header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;




.content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;



.content::-webkit-scrollbar
  display: none;


.content ul
  padding: 0;
  margin: 0;


.items-content
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;


.item
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer


.item:hover
  background-color: #EAECEE



.item p
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;


.create-text-box
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;



/*--------------------------header-----------------------*/
.notebox-container .header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;



/*---------------------------content------------------------*/

.notebox-container .content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;


#noteList

  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;



.notebox-container .content::-webkit-scrollbar
  display: none;


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
 
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="create_notbox_container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList"></textarea>
        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

我正在尝试循环遍历我的 fruits 数组，并将 fruits 放入 textareafield 中，格式如下：

Fruits
  Apple
  Orange
  Banana
  Strawberry

但是，有几个问题需要解决：

1.) Not all the fruits are being display in the textarea as the code loops through the fruits array.
2.) When copy text button is clicked, the border of the textarea turns black. I dont want that. 
3.) Also, how can I prevent user from deleting the text directly in the textarea field. I only want the textarea field to display the text and be able to be copied. I tried disabling the textarea but that prevents the text from being copied.
4.) The text color is set as green but when I copy and paste it into word document, the text color is black. Why didnt the green font color transfer through when I copied it?
5.) How can I copy and paste the text in the format I mentioned above with fruit names being indented? 

***javascript***
let fruits = [
  id: 0, name: 'Apple',
  id: 1, name: 'Orange',
  id: 2, name: 'Banana',
  id: 3, name: 'Strawberry'
]




let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')


function addItems()
  let fruitItem = ''
  let position = 'beforeend'

  for(let fruit of fruits)

    fruitItem = `<li id='$fruit.id' class="item">
        <p id="$fruit.id" class="fruits">$fruit.name</p>
    </li>`

    list.insertAdjacentHTML(position, fruitItem)
  




list.addEventListener('click', (event)=>
  //add_to_note_box.push()
  let materialSelected = event.target.classList.value
  if(materialSelected === 'fruits')
      add_to_note_box.push(fruits[event.target.id].name)
      console.log(add_to_note_box)
    
  if(event.target.style.backgroundColor === "")
    event.target.style.backgroundColor = '#3498DB'
  else
    event.target.style.backgroundColor = null
  

)


createTextBoxBtn.addEventListener('click', ()=>
  if(add_to_note_box.length === 0)
    alert('Nothing to add to the notebox')
  else
    let items = ''


    for(let text of add_to_note_box)

noteList.textContent = text
    

    add_to_note_box = []
  
)

copyTextBtn.addEventListener('click', ()=>

  if(!noteList.textContent)
    alert('There is nothing to copy')
  else
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>
    copyTextBtn.textContent = 'Copy Text'
  , 2000)
  


)



addItems()

***CSS***
*
  margin: 0;
  padding: 0;
  box-sizing: border-box;



body
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;


.parent-container
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;


.create_notbox_container
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;


.header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;




.content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;



.content::-webkit-scrollbar
  display: none;


.content ul
  padding: 0;
  margin: 0;


.items-content
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;


.item
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer


.item:hover
  background-color: #EAECEE



.item p
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;


.create-text-box
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;



/*--------------------------header-----------------------*/
.notebox-container .header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;



/*---------------------------content------------------------*/

.notebox-container .content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;


#noteList

  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;



.notebox-container .content::-webkit-scrollbar
  display: none;


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




let fruits = [
  id: 0, name: 'Apple',
  id: 1, name: 'Orange',
  id: 2, name: 'Banana',
  id: 3, name: 'Strawberry'
]




let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')


function addItems()
  let fruitItem = ''
  let position = 'beforeend'

  for(let fruit of fruits)

    fruitItem = `<li id='$fruit.id' class="item">
        <p id="$fruit.id" class="fruits">$fruit.name</p>
    </li>`

    list.insertAdjacentHTML(position, fruitItem)
  




list.addEventListener('click', (event)=>
  //add_to_note_box.push()
  let materialSelected = event.target.classList.value
  if(materialSelected === 'fruits')
      add_to_note_box.push(fruits[event.target.id].name)
      console.log(add_to_note_box)
    
  if(event.target.style.backgroundColor === "")
    event.target.style.backgroundColor = '#3498DB'
  else
    event.target.style.backgroundColor = null
  

)


createTextBoxBtn.addEventListener('click', ()=>
  if(add_to_note_box.length === 0)
    alert('Nothing to add to the notebox')
  else
    let items = ''


    for(let text of add_to_note_box)

noteList.textContent = text
    

    add_to_note_box = []
  
)

copyTextBtn.addEventListener('click', ()=>

  if(!noteList.textContent)
    alert('There is nothing to copy')
  else
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>
    copyTextBtn.textContent = 'Copy Text'
  , 2000)
  


)



addItems()
*
  margin: 0;
  padding: 0;
  box-sizing: border-box;



body
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;


.parent-container
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;


.create_notbox_container
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;


.header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;




.content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;



.content::-webkit-scrollbar
  display: none;


.content ul
  padding: 0;
  margin: 0;


.items-content
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;


.item
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer


.item:hover
  background-color: #EAECEE



.item p
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;


.create-text-box
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;



/*--------------------------header-----------------------*/
.notebox-container .header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;



/*---------------------------content------------------------*/

.notebox-container .content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;


#noteList

  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;



.notebox-container .content::-webkit-scrollbar
  display: none;


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="create_notbox_container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList"></textarea>
        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

***HTML***
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="create_notbox_container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList"></textarea>
        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

【参考方案1】：

我在下面的sn-p中写了代码。以上我解释了一些观点。

1分）原因是你不恰当的处理事件点击li对象。我们还应该在数组add_to_note_box 中添加和删除元素像这样

      if(event.target.style.backgroundColor === "") //add
        event.target.style.backgroundColor = '#3498DB'
        add_to_note_box.push(fruits[event.target.id].name)
      else //remove
        event.target.style.backgroundColor = null
        var index = add_to_note_box.indexOf(fruits[event.target.id].name);
        if (index !== -1) 
          add_to_note_box.splice(index, 1);
        
      

您还应该使用符号“+=”而不是“=”将文本添加到 textarea，并在文本之前添加符号“\n”，如下所示：

    for(let text of add_to_note_box) // notice i use += sign and also check is this line first than i dont use \n
       
      if (noteList.textContent == "")  noteList.textContent += text; continue; 
      
      noteList.textContent += '\n'+text
    

3分）你应该像这样将属性disabled添加到textarea

<textarea class="list" id="noteList" disabled></textarea>

let fruits = [
  id: 0, name: 'Apple',
  id: 1, name: 'Orange',
  id: 2, name: 'Banana',
  id: 3, name: 'Strawberry'
]




let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')


function addItems()
  let fruitItem = ''
  let position = 'beforeend'

  for(let fruit of fruits)

    fruitItem = `<li id='$fruit.id' class="item">
        <p id="$fruit.id" class="fruits">$fruit.name</p>
    </li>`

    list.insertAdjacentHTML(position, fruitItem)
  




list.addEventListener('click', (event)=>
  //add_to_note_box.push()
  let materialSelected = event.target.classList.value
  if(materialSelected === 'fruits')
      
      if(event.target.style.backgroundColor === "")
        event.target.style.backgroundColor = '#3498DB'
        
        add_to_note_box.push(fruits[event.target.id].name)
      else
        event.target.style.backgroundColor = null
        
        var index = add_to_note_box.indexOf(fruits[event.target.id].name);
        if (index !== -1) 
          add_to_note_box.splice(index, 1);
        
      
    
)


createTextBoxBtn.addEventListener('click', ()=>
  if(add_to_note_box.length === 0)
    alert('Nothing to add to the notebox')
  else
    let items = ''
    

    for(let text of add_to_note_box)
       
      if (noteList.textContent == "")  noteList.textContent += text; continue; 
      
      noteList.textContent += '\n'+text
    
    
    let children = list.children
    for(let child of children)
      child.querySelector("p").style.backgroundColor = null;
    

    add_to_note_box = []
  
)

copyTextBtn.addEventListener('click', ()=>

  if(!noteList.textContent)
    alert('There is nothing to copy')
  else
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>
    copyTextBtn.textContent = 'Copy Text'
  , 2000)
  


)



addItems()

*
  margin: 0;
  padding: 0;
  box-sizing: border-box;



body
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;


.parent-container
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;


.create_notbox_container
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;


.header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;




.content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;



.content::-webkit-scrollbar
  display: none;


.content ul
  padding: 0;
  margin: 0;


.items-content
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;


.item
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer


.item:hover
  background-color: #EAECEE



.item p
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;


.create-text-box
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;



/*--------------------------header-----------------------*/
.notebox-container .header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;



/*---------------------------content------------------------*/

.notebox-container .content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;


#noteList

  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;



.notebox-container .content::-webkit-scrollbar
  display: none;


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




let fruits = [
  id: 0, name: 'Apple',
  id: 1, name: 'Orange',
  id: 2, name: 'Banana',
  id: 3, name: 'Strawberry'
]




let add_to_note_box = []
let list = document.querySelector('#list')
let noteList = document.querySelector('#noteList')
let createTextBoxBtn = document.querySelector('.create-text-box')
let copyTextBtn = document.querySelector('.copy-text')


function addItems()
  let fruitItem = ''
  let position = 'beforeend'

  for(let fruit of fruits)

    fruitItem = `<li id='$fruit.id' class="item">
        <p id="$fruit.id" class="fruits">$fruit.name</p>
    </li>`

    list.insertAdjacentHTML(position, fruitItem)
  




list.addEventListener('click', (event)=>
  //add_to_note_box.push()
  let materialSelected = event.target.classList.value
  if(materialSelected === 'fruits')
      add_to_note_box.push(fruits[event.target.id].name)
      console.log(add_to_note_box)
    
  if(event.target.style.backgroundColor === "")
    event.target.style.backgroundColor = '#3498DB'
  else
    event.target.style.backgroundColor = null
  

)


createTextBoxBtn.addEventListener('click', ()=>
  if(add_to_note_box.length === 0)
    alert('Nothing to add to the notebox')
  else
    let items = ''


    for(let text of add_to_note_box)

noteList.textContent = text
    

    add_to_note_box = []
  
)

copyTextBtn.addEventListener('click', ()=>

  if(!noteList.textContent)
    alert('There is nothing to copy')
  else
    noteList.select()
    document.execCommand('copy');
    copyTextBtn.textContent = "Copied!"
    setTimeout(()=>
    copyTextBtn.textContent = 'Copy Text'
  , 2000)
  


)



addItems()
*
  margin: 0;
  padding: 0;
  box-sizing: border-box;



body
  position: relative;
  width: 100%;
  height: 100vh;
  font-family: 'Titillium Web', sans-serif;


.parent-container
  position: relative;
  width: 100%;
  height: 540px;
  max-height: 5400px;


.create_notbox_container
  position: absolute;
  top: 0;
  left: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;


.header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;




.content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;



.content::-webkit-scrollbar
  display: none;


.content ul
  padding: 0;
  margin: 0;


.items-content
  position: relative;
  width: 100%;
  height: calc(100% - 35px);
  max-height: calc(100% - 35px);
  overflow: auto;
  border-bottom: 1px solid #D6DBDF;


.item
  position: relative;
  border-bottom: 1px solid #EBEDEF;
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 45px;
  min-height: 45px;
  background-color: white;
  display: flex;
  align-items: center;
  cursor: pointer


.item:hover
  background-color: #EAECEE



.item p
  position: absolute;
  padding-left: 35px;
  height: 45px;
  line-height: 45px;
  width: 100%;
  white-space: nowrap;


.create-text-box
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer




/*For note box*/
/*------------------------notbox container-----------------------*/
.notebox-container
  position: absolute;
  top: 0;
  right: 10px;
  width: 400px;
  margin: 0 auto;
  box-shadow: 5px 5px 8px rgb(171, 178, 185);
  border-radius: 15px 15px 0 0;



/*--------------------------header-----------------------*/
.notebox-container .header
  position: relative;
  width: 100%;
  height: 150px;
  background-color: #2E86C1;
  border-radius: 15px 15px 0 0;



/*---------------------------content------------------------*/

.notebox-container .content
  position: relative;
  width: 100%;
  height: 390px;
  max-height: 390px;
  background-color: #EAEDED;
  overflow: hidden;


#noteList

  resize: none;
  font-size: 15px;
  font: serif;
    color: #28B463;
    text-align: center;
  /*font-weight: bold;*/
  border: none;
  height: calc(100% - 35px);
  width: 100%;



.notebox-container .content::-webkit-scrollbar
  display: none;


/*--------------------------Create Text Box--------------------------*/
.notebox-container .copy-text
  position: absolute;
  border: none;
  outline: none;
  width: 100%;
  height: 35px;
  bottom: 0;
  left: 0;
  background-color: #21618C;
  color: white;
  cursor: pointer

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <!-- Boxicons CDN Link -->
  <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
  <body>
    <div class="parent-container">

<!---Select items------>
    <div class="create_notbox_container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <ul class="list" id="list">
          </ul>
        </div>

        <button type="button" class="create-text-box">Create Text Box</button>

      </div>

    </div>
    <!--Display notebox-->
    <div class="notebox-container">
      <div class="header">
      </div>
      <div class="content">
        <div class="items-content">
          <textarea class="list" id="noteList" disabled></textarea>
        </div>

        <button type="button" class="copy-text">Copy Text</button>

      </div>

    </div>
  </div>
    <script src="script.js"></script>
  </body>
</html>

【讨论】：

谢谢。帮助很大。但是，问题 3 和 4 仍未解决。如果我禁用 textarea，我将无法复制文本。此外，文本颜色为绿色，但当我将其复制并粘贴到记事本时，字体颜色为黑色。