使用按钮(原版 JS)更改文本区域的值时出现问题

我的Note应用程序有问题。我正在尝试编写一个可以保存笔记的应用程序。我制作了三个模块——一个用于使用按钮添加注释，一个用于文本区域验证，另一个用于添加注释并将其标记为已添加。问题是我的按钮有时工作得很好。当它被破坏时，这个按钮只对上一个元素起作用(我的意思是，它应该对当前元素起作用，而不是像它不时工作的那样对下一个元素。(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)
})();

确认.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};

看看这个

你需要连接一些功能，但这是一种更简单的方式

我把笔记包装在一个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>

相关内容

最新更新

热门标签：