时间戳

首页 > 解决方案 > 使用 Javascript、DOM 和 replaceChild() 方法创建装箱单

javascript - 使用 Javascript、DOM 和 replaceChild() 方法创建装箱单

问题描述

我正在为我的任务制作一个装箱单，我们选择任何地方和任何 3 件物品要带。应该发生的是用户按下 1、2 或 3 按钮，然后会出现一个提示，告诉用户他们想用什么交换所选项目。然后，一旦他们点击 OK，新项目就会出现在列表中。因此，如果他们按 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>

标签： javascripthtmldom

解决方案

由于这是一个作业，我不会给你固定的代码，但这里是需要修复的主要问题：

  • 您需要使用用户输入的输入来创建文本节点。当前newInput = document.createTextNode("");创建一个带有空字符串的文本节点""。您需要将用户的输入传递给此。

  • nodeTextregisterKey在您的函数内部不存在。在函数体中定义的变量{}只存在于该函数体（作用域）内。因此，无论您尝试访问函数nodeText内部的任何位置，都会出现错误 - 您可以在此处registerKey阅读有关范围的更多信息。

  • 你不需要使用list.appendChild(newElement);. 这会将您的新项目附加/添加到列表末尾的列表中。这不是你想要的行为。相反，您的脚本将使用.replaceChild(). 所以你可以删除这条线。

  • nodeText.replaceChild(newInput,nodeText.childnodes[LI]);也不正确。的想法.replaceChild()是传入要替换旧元素的新元素。用例是这样的：

    parentNode.replaceChild(newChild, oldChild);

    在您的情况下，新元素是newElement，这是<li>您创建的包含用户输入值的元素，而不是 text node newInput。同样，这里nodeText不存在，因此您需要使用list而不是nodeText作为包含您的列表项/<li>元素作为子元素的（父）元素。

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

推荐阅读