Node won't Populate JavaScript
up vote
0
down vote
favorite
I am working on a Node List that will populate as the user creates new tasks. I can not get the Node to populate its values, and it is keeping me from making any progress. Anything I look up for help does not give any help unless its Premade values in the code. Not sure why and trying to get help from my professor is like talking to a brick wall.
my 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);
my 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>
This is an assignment, but unforutnately this Professor has been very unhelpful all semester and even admitted that he hasn't touched much code since the early 90's. I think my University is screwing us over with uneducated teachers. Here is his requirements if it helps clear up any confusion.
While much of the code in JsBin Linked List (Links to an external site.)Links to an external site. can be reused, you will need to make a few modifications. These include:
- Create a new empty item list object with the SLinkedList function when the page initially loads.
- In the original code the Node object uses this.value. Replace it with this.task and this.priority and this.owner, etc so that it has the same attributes as an item object in the last assignment.
- In the original code when a new linked list object is created with the SLinkedList function it adds an initial node to this.head. In the new code this.head should be null.
- Modify the append method so when it appends, it checks to see whether the head node is null. If it is null append the new item to the head. Otherwise append to the end of the linked list.
- In the original function named displayitems() take out almost all of the code and have it call a new function named getTasks(node,tasks). This new function uses the same recursive approach used in gettail() (e.g. it calls itself) to walk through the nodes in the linked list. The function's first parameter is the head node of the linked list. The second parameter is an empty string. As the recursive function calls itself and traverses the linked list add to the tasks string with the task, priority and owner values in each node. After the traverse completes return the tasks string to displayItems(). displayItems() can then use the string to write the items (and appropriate html) to the DOM.
javascript frontend nodelist
add a comment |
up vote
0
down vote
favorite
I am working on a Node List that will populate as the user creates new tasks. I can not get the Node to populate its values, and it is keeping me from making any progress. Anything I look up for help does not give any help unless its Premade values in the code. Not sure why and trying to get help from my professor is like talking to a brick wall.
my 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);
my 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>
This is an assignment, but unforutnately this Professor has been very unhelpful all semester and even admitted that he hasn't touched much code since the early 90's. I think my University is screwing us over with uneducated teachers. Here is his requirements if it helps clear up any confusion.
While much of the code in JsBin Linked List (Links to an external site.)Links to an external site. can be reused, you will need to make a few modifications. These include:
- Create a new empty item list object with the SLinkedList function when the page initially loads.
- In the original code the Node object uses this.value. Replace it with this.task and this.priority and this.owner, etc so that it has the same attributes as an item object in the last assignment.
- In the original code when a new linked list object is created with the SLinkedList function it adds an initial node to this.head. In the new code this.head should be null.
- Modify the append method so when it appends, it checks to see whether the head node is null. If it is null append the new item to the head. Otherwise append to the end of the linked list.
- In the original function named displayitems() take out almost all of the code and have it call a new function named getTasks(node,tasks). This new function uses the same recursive approach used in gettail() (e.g. it calls itself) to walk through the nodes in the linked list. The function's first parameter is the head node of the linked list. The second parameter is an empty string. As the recursive function calls itself and traverses the linked list add to the tasks string with the task, priority and owner values in each node. After the traverse completes return the tasks string to displayItems(). displayItems() can then use the string to write the items (and appropriate html) to the DOM.
javascript frontend nodelist
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am working on a Node List that will populate as the user creates new tasks. I can not get the Node to populate its values, and it is keeping me from making any progress. Anything I look up for help does not give any help unless its Premade values in the code. Not sure why and trying to get help from my professor is like talking to a brick wall.
my 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);
my 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>
This is an assignment, but unforutnately this Professor has been very unhelpful all semester and even admitted that he hasn't touched much code since the early 90's. I think my University is screwing us over with uneducated teachers. Here is his requirements if it helps clear up any confusion.
While much of the code in JsBin Linked List (Links to an external site.)Links to an external site. can be reused, you will need to make a few modifications. These include:
- Create a new empty item list object with the SLinkedList function when the page initially loads.
- In the original code the Node object uses this.value. Replace it with this.task and this.priority and this.owner, etc so that it has the same attributes as an item object in the last assignment.
- In the original code when a new linked list object is created with the SLinkedList function it adds an initial node to this.head. In the new code this.head should be null.
- Modify the append method so when it appends, it checks to see whether the head node is null. If it is null append the new item to the head. Otherwise append to the end of the linked list.
- In the original function named displayitems() take out almost all of the code and have it call a new function named getTasks(node,tasks). This new function uses the same recursive approach used in gettail() (e.g. it calls itself) to walk through the nodes in the linked list. The function's first parameter is the head node of the linked list. The second parameter is an empty string. As the recursive function calls itself and traverses the linked list add to the tasks string with the task, priority and owner values in each node. After the traverse completes return the tasks string to displayItems(). displayItems() can then use the string to write the items (and appropriate html) to the DOM.
javascript frontend nodelist
I am working on a Node List that will populate as the user creates new tasks. I can not get the Node to populate its values, and it is keeping me from making any progress. Anything I look up for help does not give any help unless its Premade values in the code. Not sure why and trying to get help from my professor is like talking to a brick wall.
my 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);
my 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>
This is an assignment, but unforutnately this Professor has been very unhelpful all semester and even admitted that he hasn't touched much code since the early 90's. I think my University is screwing us over with uneducated teachers. Here is his requirements if it helps clear up any confusion.
While much of the code in JsBin Linked List (Links to an external site.)Links to an external site. can be reused, you will need to make a few modifications. These include:
- Create a new empty item list object with the SLinkedList function when the page initially loads.
- In the original code the Node object uses this.value. Replace it with this.task and this.priority and this.owner, etc so that it has the same attributes as an item object in the last assignment.
- In the original code when a new linked list object is created with the SLinkedList function it adds an initial node to this.head. In the new code this.head should be null.
- Modify the append method so when it appends, it checks to see whether the head node is null. If it is null append the new item to the head. Otherwise append to the end of the linked list.
- In the original function named displayitems() take out almost all of the code and have it call a new function named getTasks(node,tasks). This new function uses the same recursive approach used in gettail() (e.g. it calls itself) to walk through the nodes in the linked list. The function's first parameter is the head node of the linked list. The second parameter is an empty string. As the recursive function calls itself and traverses the linked list add to the tasks string with the task, priority and owner values in each node. After the traverse completes return the tasks string to displayItems(). displayItems() can then use the string to write the items (and appropriate html) to the DOM.
javascript frontend nodelist
javascript frontend nodelist
asked Nov 11 at 22:55
J_Roost312
96
96
add a comment |
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254063%2fnode-wont-populate-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254063%2fnode-wont-populate-javascript%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown