首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >无法将创建的文本框和按钮移动到正确的位置?

无法将创建的文本框和按钮移动到正确的位置?
EN

Stack Overflow用户
提问于 2018-07-23 08:59:51
回答 1查看 0关注 0票数 0

我有一些代码当前允许输入文本,一个按钮来添加它,然后一个按钮来删除它(一旦创建了所说的文本框)。我需要新创建的文本和按钮显示在标题“Weeks”下面(还有3列,但我当然可以在之后传输它)。

代码语言:txt
复制
function removeElement(e) {
  let button = e.target;
  let field = button.previousSibling;
  let div = button.parentElement;
  let br = button.nextSibling;
  div.removeChild(button);
  div.removeChild(field);
  div.removeChild(br);

  let allElements = document.getElementById("reqs");
  let inputs = allElements.getElementsByTagName("input");
  for (i = 0; i < inputs.length; i++) {
    inputs[i].setAttribute('id', 'reqs' + (i + 1));
    inputs[i].setAttribute('value', (i + 1));
    inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i + 1));
  }
}

function add() {
  let allElements = document.getElementById("reqs");
  let reqs_id = allElements.getElementsByTagName("input").length;

  reqs_id++;

  //create textbox
  let input = document.createElement('input');
  input.type = "text";
  input.setAttribute("class", "w3-input w3-border");
  input.setAttribute('id', 'reqs' + reqs_id);
  input.setAttribute('value', reqs_id);
  let reqs = document.getElementById("reqs");

  //create remove button
  let remove = document.createElement('button');
  remove.setAttribute('id', 'reqsr' + reqs_id);
  remove.onclick = function(e) {
    removeElement(e);
  };
  remove.setAttribute("type", "button");
  remove.innerHTML = "Remove";

  //append elements
  reqs.appendChild(input);
  reqs.appendChild(remove);
  let br = document.createElement("br");
  reqs.appendChild(br);
}
代码语言:txt
复制
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: sans-serif;
  font-size: 16px;
}

input {
  font-family: sans-serif;
  display: block;
  background-color: #333;
  color: #FFF;
  padding: 10px;
}

#reqs {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
}

.week {
  flex: 1;
  width: 100px;
  border: 1px solid grey;
}

.add {
  width: 100%;
  background-color: #eee;
  text-align: center;
}

.add textarea {
  width: 90%;
}

remove {
  width: 100%;
  background-color: #eee;
  text-align: center;
}

button {
  width: 100%;
  background-color: #eee;
  text-align: center;
}
代码语言:txt
复制
<div id="reqs">
  <div class="week week1">
    <div class="add">
      <h1>Weeks</h1>
      <textarea></textarea>
      <button type="button" value="Add" onclick="javascript:add();">Add text</button><br>
    </div>
  </div>
  <div class="week week2">
    <div class="add">
      <h1>Topics</h1>
      <textarea></textarea>
    </div>
  </div>

目前新创建的文本区域和“删除”按钮位于屏幕的最右侧,并且工作正常。

EN

Stack Overflow用户

发布于 2018-07-23 18:55:43

与你的代码有点不同,但可能更接近你正在寻找的东西?(稍微不清楚你想要按钮的位置......文字可能需要更宽)

代码语言:txt
复制
function removeElement(e) {
  let button = e.target;
  let field = button.previousSibling;
  let div = button.parentElement;
  let br = button.nextSibling;
  div.removeChild(button);
  div.removeChild(field);
  div.removeChild(br);

  let allElements = document.getElementById("reqs");
  let inputs = allElements.getElementsByTagName("input");
  for (i = 0; i < inputs.length; i++) {
    inputs[i].setAttribute('id', 'reqs' + (i + 1));
    inputs[i].setAttribute('value', (i + 1));
    inputs[i].nextSibling.setAttribute('id', 'reqsr' + (i + 1));
  }
}

function add() {
  let allElements = document.getElementById("reqs");
  let reqs_id = allElements.getElementsByTagName("input").length;

  reqs_id++;

  //create textbox
  let input = document.createElement('input');
  input.type = "text";
  input.setAttribute("class", "w3-input w3-border");
  input.setAttribute('id', 'reqs' + reqs_id);
  input.setAttribute('value', reqs_id);
  let reqs = document.getElementById("reqs");

  //create remove button
  let remove = document.createElement('button');
  remove.setAttribute('id', 'reqsr' + reqs_id);
  remove.onclick = function(e) {
    removeElement(e);
  };
  remove.setAttribute("type", "button");
  remove.innerHTML = "Remove";

  //append elements
  reqs.appendChild(input);
  reqs.appendChild(remove);
  let br = document.createElement("br");
  reqs.appendChild(br);
}
代码语言:txt
复制
body {
  margin: 0;
  padding: 0;
}

h1 {
  font-family: sans-serif;
  font-size: 16px;
}

input {
  font-family: sans-serif;
  display: inline-block;
  position:relative;
  background-color: #333;
  color: #FFF;
  padding:10px;
}

#reqs {
  width: 100%;
  height: 100%;
  position: relative;
}

.week {
  display:inline-block;
  vertical-align:top;
  width: 49%;
  border: 1px solid grey;
  margin-bottom:2px;
}

.add {
  width: 100%;
  background-color: #eee;
   text-align: center;
}

.add textarea {
  width: 100%;
}

remove {
  width: 100%;
  background-color: #eee;
  text-align: center;
}

button {
  width: 50%;
  background-color: #eee;
  text-align: center;
  padding:7px;
}
代码语言:txt
复制
<div id="reqs">
  <div class="week week1">
    <div class="add">
      <h1>Weeks</h1>
      <textarea></textarea>
      <button type="button" value="Add" onclick="javascript:add();">Add text</button><br>
    </div>
  </div>
  <div class="week week2">
    <div class="add">
      <h1>Topics</h1>
      <textarea></textarea>
    </div>
  </div>

票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/-100005645

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档