个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 14:05:56 31 4
gpt4 key购买 nike

我正在为我的任务制作一份装箱单，我们可以选择任何地点和任何 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
文章推荐： c++ - 为什么字符串作为指针或字符串作为原始数组总是在重载函数中作为指针调用？
文章推荐： p5.js - 如何在两个对象(火箭飞船和射击)之间建立独立性？
文章推荐： python - 如何使用 numpy 改进我的自定义函数矢量化
文章推荐： python - 将 Pandas 数据框转换为以第一列为键的字典
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com