文章/答案/技术大牛

发布

社区首页 >问答首页 >破损Javascript代码

问破损Javascript代码
EN

Stack Overflow用户

提问于 2017-11-14 23:32:06

回答 1查看 81关注 0票数 0

我试图创建一个网站，在那里发生三件事，但我被困住了。

(1)当单击按钮“add”按钮时，它将创建一个新段落并将其添加到输出中。段落的内容应该来自“添加”按钮下面的文本区域。

(2)如按下“删除”按钮，我须删除第一段。

(3)如果用户试图在没有段落的情况下删除，则创建一个“警报”，上面写着：“没有要删除的段落”。

我让我的JS把每一段都放进div，但我不知道怎么删除它.任何帮助都将不胜感激。

window.onload = function() {
  var button = document.getElementById("add");
  button.onclick = insertItem;
}

function insertItem() {
  var added = document.getElementById("output");
  var textToAdd = document.getElementById("input");
  if (textToAdd.value != "") {
    var newp = document.createElement("p");
    newp.innerHTML = textToAdd.value;
    added.appendChild(newp);
  }
}

var deletebutton = document.getElementsByTagName("delete");
deletebutton.onclick = deleteItem;

function deleteItem() {
  var output = document.getElementById("output");
  var pars = output.getElementsByTagName("p");
  if (pars.length > 0) {
    output.removeChild(pars[0]);
  }
}

#output {
  border: blue 5px solid;
  padding: 10px;
  margin-bottom: 10px;
  margin-top: 10px;
  width: 50%;
}

#output p {
  padding: 10px;
  border: black 1px dashed;
}

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
  <script src="task3.js"></script>
</head>

<body>
  <h2> TASK 3 - Creating, Appending and Deleting Nodes in the DOM Tree </h2>
  <p> Type in text below, click add to add as paragraph. <button id="add"> Add </button> </p>
  <textarea id="input" rows="10" cols="60">
    </textarea><br>
  <button id="delete">Delete Last Paragraph</button>
  <br><br>
  <h2> Added Paragraphs </h2>
  <div id="output">
  </div>
</body>

</html>

javascript

html

css

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-11-14 23:43:15

你把删除按钮取错了。您使用的是getElementsByTagName而不是by id。
删除时，您可能会删除标记中不属于输出的第一个<p>。要解决这个问题，只需获取output div的所有子级并删除第一个：函数deleteItem() { let output = document.getElementById('output') if (output.hasChildNodes()) { let output= output.childNodes outputs.remove() }}

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/47297027

复制

相似问题

问破损Javascript代码
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问破损Javascript代码EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问破损Javascript代码
EN