I'm trying to create an online commenting system where each user can comment on a post and I want a popup text area to be unique to its own button.
Each element is meant to open a text field where a user is to input text to be posted (say in reply to a preceding post or comment).
There are three buttons (representing each user) which when clicked is intended to display a text field specific to the button (or user).
The problem:
After clicking a button a modal will popup. If you try typing some text into the field and close the field (without clearing the text in the field), then open another field by clicking on another button, you'll notice that the text typed into one
textarea
will also be visible in another instance when you click on another button.
What I'm trying to achieve is to make a
textarea
unique to its direct button instead of a text constantly showing for all buttons clicked.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>multi textarea</title>
</head>
<body>
<button>Open a textarea</button>
<button>Open a textarea</button>
<button>Open a textarea</button>
<div class="textarea_modal_backdrop">
<textarea name="" id="" cols="80" rows="20"></textarea>
</div>
</body>
</html>
<script src="./script.js"></script>
CSS:
.textarea_modal_backdrop{
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #444c;
display: grid;
place-items: center;
visibility: hidden;
opacity: 0;
}
.textarea_modal_backdrop.textarea_modal_backdrop_active{
visibility: visible;
opacity: 1;
}
JS:
const allButtonElms = document.getElementsByTagName('button');
const modalBackdrop = document.querySelector('.textarea_modal_backdrop');
for (var i = 0; i < allButtonElms.length; i+=1) {
allButtonElms[i].onclick = () => {
modalBackdrop.classList.add('textarea_modal_backdrop_active')
}
}
document.addEventListener('click', (event) => {
if (event.target.matches('.textarea_modal_backdrop')) {
modalBackdrop.classList.remove('textarea_modal_backdrop_active')
}
})
I'll be grateful if everyone can join in sharing their ideas on how this issue can be solved.
Thank you all!
What I have tried:
I tried applying textareas for any button clicked, but it seems all buttons are linked to the same textarea.
I really appreciate everyone's ideas in solving this issue.