How can I transfer user input from a single form to different textareas in different divs using vanilla javascript - no jquery?

Question

I need to dynamically create a form with a user input field and submit button that when clicked transfers the text from the user input field to a textarea that is housed in a div.

I have more code but its really long and messy and i'm currently working on refactoring it. I just got stuck with this part.

The answers to similar questions I've seen so far on slack give the answers in jQuery.

Here is what I have so far

 //hide element function hide(x) { // document.getElementsByClassName(x).style.display = "none"; var elems = document.getElementsByClassName(x); for (var i=0;i<elems.length;i+=1){ elems[i].style.display = 'none'; } } //show element function show(x) { event.preventDefault();//prevents divs from dissapearing after 'Add a list' button has been clicked // document.getElementsByClassName(x).style.display = "none"; var elems = document.getElementsByClassName(x); for (var i=0;i<elems.length;i+=1){ elems[i].style.display = 'block'; } } //create textarea for lists var textareaElement = document.createElement('textarea'); textareaElement.setAttribute("type", "text"); textareaElement.setAttribute("class", "textarea-title"); textareaElement.setAttribute("overflow", "break-word"); textareaElement.setAttribute("placeholder", "Enter list title..."); var titleTaker = document.getElementsByClassName('list-input').value; textareaElement.innerHTML = titleTaker; 

 input[type=text].list-input { display: block; background-color: rgb(255, 255, 255); border: 1px solid rgb(127, 170, 199); border-radius: 3px; height: 30px; margin: 5px; box-shadow: 0 0 0 1px rgb(127, 170, 199); font-size: 14px; padding-left: 10px; display: none; } .add-list-button-container { margin: 0 5px 5px; display: none; } input[type=submit].list-input-button { color: rgb(255, 255, 255); background-color: #5aac44; box-shadow: 0 1px 0 0 #3f6f21; background-color: rgb(90, 172, 68); box-shadow: 0 1px 2px 0 rgb(46, 73, 39); border: none; font-size: 14px; height: 30px; padding-left: 14px; padding-right: 14px; margin-right: 10px; font-weight: 700; } .textarea-container { display: flex; flex-direction: row; } textarea { display: block; word-wrap: break-word; overflow: hidden; padding:5px 10px; background-color: rgb(255, 255, 255); border: 1px solid rgb(127, 170, 199); border-radius: 3px; font-size: 14px; outline: none; /* Removes the blue glow from around textarea */ resize: none; /* Removes resize handle */ } .textarea-title{ box-shadow: 0 0 0 1px rgb(127, 170, 199); height: 20px; max-height: 120px; margin-top: 6px; margin-left: 10px; /* clear: right !important; */ } 

 <form onsubmit="return show('list-wrapper');"> <a class="list-links" href="#" onclick="hide('list-links'); show('list-input'); show('add-list-button-container'); "> <span class="link-selector"> <span class="plus-icon"><i class="fas fa-plus"></i></span> <span class="add-list">Add list</span> <span class="add-another-list">Add another list</span> </span> </a> <input type="text" class="list-input" required minlength="1" autocomplete="off" maxlength="500" placeholder="Enter list title..."> <div class="add-list-button-container"> <input class="list-input-button" type="submit" value="Add List" required minlength="1" maxlength="500" placeholder="Enter list title..." > <a class="list-close-button" href="#"><i class="fas fa-times"></i></a> </div> </form><!-- end of form --> 

Answer 1

This code uses delegated event handling so you can respond to submit actions on forms that don't exist in the dom when the js is executed. Look at the part with e.target to see this in action. The additional p elements are just appended to the dom element found by selecting the parent of the target form.

 // add new list submit eventlistener document.getElementById("add-list-form").addEventListener("submit", addList); function addList(e) { e.preventDefault(); const input = document.getElementById("list-name"); const name = input.value; input.value = ''; if ('' == name) { return; } const list = document.createElement('div'); list.setAttribute('class', 'list'); list.innerHTML = `<h3>` + name + `</h3> <form class="add-item-form"> <textarea></textarea> <input type="submit" value="Add New Item"> </form>`; document.getElementById("list-container").appendChild(list); } // add new item submit eventlistener document.addEventListener('submit', function(e) { if (e.target.matches('.add-item-form')) { e.preventDefault(); const textarea = e.target.getElementsByTagName('textarea')[0]; const text = textarea.value; textarea.value = ''; if ('' == text) { return; } const listItem = document.createElement('p'); listItem.innerHTML = text; e.target.parentElement.appendChild(listItem); } }); 

 #list-container { margin-top: 20px; padding: 2px; border-radius: 4px; background: #666; border: 1px solid #333; } .list { padding: 4px; border-radius: 4px; background: #ccc; border: 1px solid #333; margin: 2px; } .list h3 { margin: 0; } 

 <form id="add-list-form"> <input type="text" id="list-name"> <input type="submit" value="Add New List"> </form> <div id="list-container"> <div>