javascript - 如何使用普通 javascript 将用户输入从单个表单传输到不同 div 中的不同文本区域 - 没有 jquery？

Question

我需要动态创建一个带有用户输入字段和提交按钮的表单，单击该按钮会将文本从用户输入字段传输到 div 中的文本区域。

我有更多代码，但它真的又长又乱，我目前正在努力重构它。我刚刚被这部分困住了。

到目前为止我在 slack 上看到的类似问题的答案都在 jQuery 中给出了答案。

这是我到目前为止所拥有的

//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

此代码使用委托(delegate)事件处理，因此您可以在执行 js 时响应 dom 中不存在的表单上的提交操作。查看 e.target 部分以了解其实际情况。附加的 p 元素只是附加到通过选择目标表单的父级找到的 dom 元素。

// 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>