个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
31
4
我正在为我的任务制作一份装箱单，我们可以选择任何地点和任何 3 件元素。应该发生的是用户按下 1、2 或 3 按钮，然后会出现一个提示，告诉用户他们想要用什么交换所选项目。然后，一旦他们点击确定，新项目就会出现在列表中。因此，如果他们按 1 并键入一个项目，则新项目将在 1 中。如果用户想要交换 2 中的项目或 3 中的项目，也会发生同样的情况。但是，我遇到的问题是它不显示新项目。它允许我按 1、2 或 3，然后键入我想要与之交换的任何项目，然后添加到列表中，列表末尾出现 4。要交换项目，作业要求使用 replaceChild() 方法。我是不是在编码中输入了错误或忘记了什么？感谢您的帮助。
<!DOCTYPE html>
<html lang="en">
<head>
<title>CIS 223 Chapter 10 Program</title>
<meta charset="utf-8">
<script>
var list;
function createDOM()
{
list = document.getElementById("items");
var newElement = document.createElement("LI");
var nodeText = document.createTextNode("Sunscreen");
newElement.appendChild(nodeText);
list.appendChild(newElement);
var newElement = document.createElement("LI");
var nodeText = document.createTextNode("Water");
newElement.appendChild(nodeText);
list.appendChild(newElement);
var newElement = document.createElement("LI");
var nodeText = document.createTextNode("Swim suits");
newElement.appendChild(nodeText);
list.appendChild(newElement);
}
//Swap items function.
function registerKey(keyEvent)
{
var keyValue = keyEvent.key;
if (keyValue < "1" || keyValue > "3")
{
alert("Only press 1, 2, or 3");
return;
}
var userInput;
var newInput;
var newElement = document.createElement("LI");
//Prompt user for new entry.
userInput = prompt("Enter a new item for slot "+keyValue,"");
//Check input for valid entry.
if (userInput != null && userInput != "")
{
//Write Your code to Pass string input to Text Node.
// .......
newInput = document.createTextNode("");
//Write Your code to Attach Text Node to Element.
// .......
newElement.appendChild(newInput);
list.appendChild(newElement);
var whichNode = parseInt(keyValue); // which item to be replaced
//Write Your code to Replace existing node with new node.
// .......
nodeText.replaceChild(newInput,nodeText.childnodes[LI]);
}
}
</script>
</head>
<body onload=createDOM() onkeypress=registerKey(event)>
<div id="wrapper">
<header>
<h1>Summer Vacation</h1>
</header>
<main>
<h2>We're going to Cancun, Mexico!</h2>
<p>Let's pack a few <em>essentials</em> for the trip.</p>
<ol id="items">
</ol>
<p>These provisions were carefully selected for this trip.<br><br>
However, you can swap out any of the three items by pressing:<br>
<strong>1</strong>, <strong>2</strong>, or <strong>3</strong> on your keyboard.</p>
</main>
</div>
</body>
</html>最佳答案
因为这是一个作业，我不会给你修复的代码，但这里是需要修复的主要问题:
您需要使用用户输入的内容创建文本节点。目前newInput = document.createTextNode("");创建一个带有空字符串的文本节点 "" .您需要将用户的输入传递给它。
nodeText在你的 registerKey 中不存在功能。函数体内定义的变量 {}仅存在于该函数体(范围)内。因此，无论您在何处尝试访问 nodeText在你的 registerKey 里面函数你会得到一个错误 - 你可以阅读更多关于作用域的信息 here .
您不需要使用 list.appendChild(newElement); .这会将您的新项目附加/添加到列表末尾的列表中。这不是您想要的行为。相反，您的脚本将使用 .replaceChild() 将该项目添加到您的列表中。 .所以你可以删除这一行。
nodeText.replaceChild(newInput,nodeText.childnodes[LI]);也不正确。 .replaceChild()的思路|就是传入你想要替换旧元素的新元素。用例是这样的:
parentNode.replaceChild(newChild, oldChild);
在您的例子中，新元素是 newElement ，这是 <li>您创建的包含用户输入值的元素，而不是文本节点 newInput .同样，这里 nodeText不存在，所以你需要使用 list而不是 nodeText因为那是包含您的列表项的(父)元素/<li>元素作为 child 。
nodeText.childnodes[LI]也会给你带来问题。如上所述，nodeText需要是 list .此外，childnodes需要改为childNodes .这会给你一个 NodeList 您的 list 中的子项目，类似于数组。回想一下，您需要将项目作为第二个参数传递给 replaceChild()需要是您要从列表中替换/删除的项目，因此需要使用 whichNode 从节点列表中获取此项目数字。你可以看看 NodeList.item() 帮助您实现这一目标。请注意，您已经创建了带有空格的 HTML 元素:
<ol id="items">
</ol>
意思是使用.childNodes在你的空<ol>将为您提供 NodeList 索引 0 处的元素。我建议您删除此空格并使用 <ol id="items"></ol>相反:
var items = document.getElementById("items1");
console.log(items.childNodes); // empty NodeList
var items = document.getElementById("items2");
console.log(items.childNodes); // NodeList with 1 item (undesirable)<ol id="items1"></ol>
<ol id="items2">
</ol>关于javascript - 使用 Javascript、DOM 和 replaceChild() 方法创建装箱单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68514882/
31
4
0
我知道这是一个简单的概念，但我似乎无法让它发挥作用。任何想法为什么？这是我的代码: var oldChild = document.getElementById("sbX1"); var newChi
我有这个代码 function insertAfter(newNode, referenceNode) {
我正在自学 javascript，但不理解我从一些示例代码中获得的结果。为了简洁起见，我删减了代码。 html: firstChild and lastChild Property
在此先感谢您的帮助。所以在我的网站上，我在同一个 div 中有 2 张图片并排放置。我正在使用 replaceChild 来替换第一张图片。一切正常，但当它删除第一张图片时，第二张图片会在一瞬间向左移
我正在使用此 PHP 代码替换 XML 文件中的一系列节点: 531670 METRA ELECTRONICS/MOBILE AUDIO Buy Car, Marine & GPS Car
我是计算机科学专业的学生，我们正在用 javascript 做练习，练习是:“用 ID 为“numberFour”且文本为“Mistreatment”的新项目替换项目编号 4。” 这是我做练习之前
我正在尝试替换 xml 树的节点: QFile file("xml1.xml"); file.open(QFile::ReadOnly); QDomDocument xml; xml.setConte
考虑以下代码: $xml = XML; $partials['thisRegion'] = "Here's this region"; $partials['thatRegion'] = "H
这是我的函数的源代码: bool FieldModel::updateNode(QDomNode &node,const QString &parent){ QDomElement rootOfT
我是 javascript 的新手，发现了一个我今天无法解释的有趣行为。我有一个自定义 (带有图像)在一个网站上，在 IE7 及以下版本中显示奇怪。为了克服这个问题，我想使用 replaceChil
我正在尝试用我制作的新元素替换当前的 dom 元素。 我实现了以下行 $(this).parent().replaceChild(newElem,this); 但是它给出错误提示说 $(this).p
有没有一种简单的方法可以将它从 appendChild 更改为 replaceChild？ 这当然会不断增加更多元素。同样出于某种原因，它没有将值放在 DIV 或 SPAN 中，似乎放在它下面。 va
我有 3 个并排的图像，我必须在它们下面放置 2 个按钮。单击前进，图像应向前移动并改变位置，然后向后移动，反之亦然。我试图用数组完成这项工作，但它没有响应。它只移动一次，无论是向前还是向后，单击一次
我正在尝试使用 powershell 和 xml 做一些非常简单的事情，但没有遇到任何麻烦。基本上我正在尝试采用以下 xml... 并按名称对机器元素进行排序。然后将它们放回 XML 中，以便我可以保
我正在使用以下代码更改输入类型 onfocus 并将其重置为文本 onblur。但这是行不通的 HTML JS function changeInputType(oldObject, oTyp
我正在尝试更新表格以在保存记录时显示新行。我的代码当前再次加载整个表以及现有表。例如，我看到第 1-15 行，然后添加一行并看到总共 31 行，第 1-15 行，然后是第 1-16 行都在同一个表中。
我正在动态生成一个表，然后我想将它作为子项附加到 div。问题是每次我重新生成表格时，它都会附加到同一个 div 中，而不会删除旧表格。 if(context.children.length == 0
我正在尝试替换 标记为 使用 Node.replaceChild 从 XHTML 字符串创建的 DOM 文档中的标记方法。两个标签具有相同的样式属性 style="color: blue;" ，但是当
我有一个 的列表元素: Item 1 Item 2 Item 3 我可以交换两个吗 元素 - 比如说 item1 和 item2 - 带有 replaceChild ，DOM树修改方
我正在为我的任务制作一份装箱单，我们可以选择任何地点和任何 3 件元素。应该发生的是用户按下 1、2 或 3 按钮，然后会出现一个提示，告诉用户他们想要用什么交换所选项目。然后，一旦他们点击确定，新项
我是一名优秀的程序员,十分优秀！