Click here to Skip to main content
15,185,471 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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:

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:

csss
.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:

JavaScript
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.
Posted
Updated 1hr 10mins ago
v2

1 solution

I've put together a JSFiddle - Comment boxes[^] with an example of how you can dynamically create textareas by clicking elements in a page.

It's a basic example but essentially you can assign an id attribute to elements which you know can receive some sort of comment. In the code you can use the id attribute to build a <form> with an action which is different depending on the ID.

So if the element or button you click has an id="content-1" then you could build a form element with an action of action="/comment/content/1" meanwhile responding to a previous comment could have an id="comment-1" and your action could be action="/comment/response/1?

If the part about dynamically creating these elements isn't much use to you, you probably still need to use some sort of ID or data-comment-id attributes or similar and then use the Javascript to adjust the form to run a different operation.
   
Comments
Matthew Don 4hrs 5mins ago
   
Sir, please could you help me look into my code and make the necessary fix? Please?
Chris Copeland 2hrs 10mins ago
   
I've provided you with a JS Fiddle which will let you dynamically create textareas, each bound to clicking a certain element, you can use that as a template for creating your own system.

If having textareas generated per-click isn't what you're after then you'll need to come up with an alternate solution. If you have just one textarea on the screen and you're toggling visibility of it, then of course it will just display the previously entered content each time.

You either need to take the content from the textarea when it's hidden each time and do something with it (submit it via AJAX or store it in a JS variable), or you need to create new textareas with each click.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900