使用按钮更改 textarea 值的问题（vanilla JS）

Question

我的笔记应用程序有问题。我正在尝试编写一个可以保存笔记的应用程序。我制作了三个模块 - 一个用于使用按钮添加注释，一个用于文本区域验证，一个用于添加注释并将其标记为已添加。问题是我的按钮有时工作正常。当它被打破时，这个按钮只对前一个元素起作用（我的意思是它应该对当前元素起作用，而不是对下一个元素起作用，就像它不时起作用一样。）Confirm.js 的任务是它需要textarea.value 并将其保存到 textarea.parentNode.textContent。有人可以告诉我我做错了什么吗？不知道哪里错了

Script.js

import {addNote} from './addNote.js';
import {textareaValidation} from './textareaValidation.js';
import {confirm} from './confirm.js';
(function(){
document.querySelector('button.btn-add-note').addEventListener('click', function() 
{addNote.createElement()}, false);

setInterval(function(){
    var btnConfirm = document.querySelectorAll('button.btn.confirm');
    var textArea = document.querySelectorAll('textarea');
        for(let i =0; i<textArea.length; i++){
        textArea[i].addEventListener('keypress', function(){textareaValidation.changeHeight(textArea[i])}, false);
        textArea[i].addEventListener('keyup', function(){textareaValidation.changeHeight(textArea[i])}, false);
        btnConfirm[i].addEventListener('click', function(){confirm.conf(textArea[i])}, false);
        }       

   },500)
   })();

Confirm.js

var confirm = (function(){
function conf(textarea){
    
    if(textarea.value.length>0){
    textarea.parentNode.textContent = textarea.value;
    }
}
var result = {
    conf: conf
};
return result;
})();
export {confirm};

编辑： HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Note</title>
<link rel="stylesheet" href="css/style.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" 
rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="top">
        <span class="lato">Note app</span><button class='btn-add-note'>Add 
    note</button>
    </div>    
</div>
<script type='module' src="js/script.js"></script>

</body>
</html>

Addnote.js:

var addNote = (function(){
function createElement(){
    var note = document.createElement('div');
    note.classList.add('note');
    var noteHtml = "<span class='title lato'>Title: <input maxlength='18' 
 type='text'></input></span> <span class='content lato'>Content: <textarea 
 maxlength='255' rows='1'></textarea></span> <span class='block'>Character 
limit: 255/255</span> <button class='btn cancel'>Cancel</button><button 
class='btn confirm'>Confirm</button>";
    note.innerHTML = noteHtml;
    document.querySelector('div.container').appendChild(note);
}
var api={
    createElement: createElement
}

return api;
})();
export {addNote};

Answer 1

看看这个

您需要连接一些函数，但这是一种更简单的方法

我将笔记包裹在 div 中（为什么所有这些跨度？？？）

const container = document.querySelector('div.container');

function conf(textarea) {
  if (textarea.value.length > 0) {
    textarea.parentNode.textContent = textarea.value;
  }
}

function createElement() {
  var note = document.createElement('div');
  note.classList.add('note');
  var noteHtml = `<div><span class='title lato'>Title: <input maxlength='18' type='text'></input></span> 
<span class='content lato'>Content: <textarea maxlength='255' rows='1'></textarea></span> 
<span class='block'>Character limit: 255/255</span> 
<button class='btn cancel'>Cancel</button>
<button class='btn confirm'>Confirm</button></div>`;
  note.innerHTML = noteHtml;
  container.appendChild(note);
}

container.addEventListener("input",function(e) {
  const tgt = e.target;
  if (tgt.tagName==="TEXTAREA") {
    textareaValidation.changeHeight(tgt)
  }
})  
container.addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("confirm")) {
    conf(tgt.closest("div").querySelector("textarea"))
  }
  else if (tgt.classList.contains("btn-add-note")) {
    createElement()
  }
  else if (tgt.classList.contains("cancel")) {
    tgt.closest("div").remove();
  }
})

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<div class="container">
  <div class="top">
    <span class="lato">Note app</span> <button class='btn-add-note'>Add note</button>
  </div>
</div>

使用按钮更改 textarea 值的问题（vanilla JS）

Problem with changing textarea's value using button (vanilla JS)

javascript

dom-events