节点不会填充JavaScript

时间:2018-11-11 22:55:28

标签: javascript frontend nodelist

我正在处理一个节点列表,该列表将在用户创建新任务时填充。我无法让Node填充其值,这使我无法取得任何进展。除非代码中包含Premade值,否则我寻找的任何帮助都不会提供任何帮助。不确定为什么为什么要尝试从教授那里寻求帮助就像在砖墙上聊天一样。

我的JavaScript

function Node() {
    this.task = document.getElementById('task').value;
    this.priority = document.getElementById('priority');
    this.owner = function () {
            if (Math.random() > .5) {
                return 'Bob';
            } else {
                return 'Joe';
            }
        };
    this.next = null;
}

function SLinkedList() {
    this.head = null;

    this.append = function() {
        var node = new Node();
        var checkNode = this.head;
        if (!checkNode) {
            this.head = node;
            return node;
        } else {
            var tail = this.findTail(this.head);
            tail.next = node;
        }
    };

    this.findTail = function (currentNode) {
        if (currentNode.next === null) {
            return currentNode;
        } else {
            return this.findTail(currentNode.next);
        }
    };

    document.getElementById('item-output').innerHTML = "Item added. Task: " `+ Node.task + " Priority: " + Node.priority + "Owner: " + Node.owner;`
}

//unfinished to display all items because node won't populate
function displayItems() {
    this.getTasks = function(node, tasks) {

    }
}

var myList = new SLinkedList();

console.log(myList.head);

我的HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Linked List</title>
    <link rel="stylesheet" href="linkedList.css">
    <script type="text/javascript" src="linkedList.js" defer></script>
</head>
<body>
    <br />
    <form id="theForm">
        <fieldset>
            <legend>
                Enter a (Business) Item To Be Done
            </legend>
            <div>
                <label for="task">Task:</label>
            </div>
            <div>
                <input type="text" name="task" id="task" required="required">
            </div>
            <div>
                <label for="task">Priority:</label>
            </div>
            <div>
                <select name="priority" id="priority" required="required">
                <option value="high">high</option>
                <option value="medium">medium</option>
                <option value="low">low</option>
              </select>
            </div>

             <div>
              <input type="button" onclick="SLinkedList()" value="Add it!" > 
            </div>
            <div id="item-output"></div>
        </fieldset>
        <fieldset>
            <legend>
                Display All (Business) Items
            </legend>
            <div>
              <input type="button" value="Display All Items" onclick="displayItems()">
            </div>
            <div id="all-items"></div>
        </fieldset>
    </form>
</body>
</html>

这是一项作业,但不幸的是,这位教授在整个学期中一直无济于事,甚至承认自90年代初以来他并没有接触太多代码。我认为我的大学正在把我们与未受过教育的老师联系在一起。这是他的要求,以帮助消除任何混乱。

JsBin链接列表中的许多代码(链接到外部站点。)链接到外部站点。可以重复使用,则需要进行一些修改。这些包括:

  1. 初始加载页面时,使用SLinkedList函数创建一个新的空项目列表对象。
  2. 在原始代码中,Node对象使用this.value。替换为this.task和this.priority和this.owner等,以使其具有与上一次分配中的项目对象相同的属性。
  3. 在原始代码中,当使用SLinkedList函数创建新的链表对象时,它会向this.head添加一个初始节点。在新代码中,this.head应该为null。
  4. 修改append方法,以便在追加时检查头部节点是否为空。如果为null,则将新项附加到头部。否则,请附加到链接列表的末尾。
  5. 在名为displayitems()的原始函数中,几乎删除了所有代码,并调用了名为getTasks(node,tasks)的新函数。这个新函数使用gettail()中使用的相同递归方法(例如,它调用自身)来遍历链表中的节点。该函数的第一个参数是链接列表的头节点。第二个参数是一个空字符串。当递归函数调用自身并遍历时,链表将添加到任务字符串中,并在每个节点中包含任务,优先级和所有者值。遍历完成后,将任务字符串返回到displayItems()。然后,displayItems()可以使用字符串将项目(和适当的html)写入DOM。

0 个答案:

没有答案