Javascript global variable and namespace
Question
I'm trying to understand why a tab isn't updated with values entered through a form.
The program is made up of three parts:
- tasks10.html with the form and tasks10.js call
- utilities10.js grouping the functions into an object U = {...} to create a namespace. The function used to populate the tab is named plusTask.
- tasks10.js an immediately invoked function which purpose is to assign 'onsubmit' event the function U.plusTask
I put the declaration var tasks = []; in tasks10.js => failed; in plusTask => failed. In both cases the tab isn't populated and the index still remain 0.
HTML
<!doctype html>
<head>
<title>List</title>
<link rel="stylesheet" href="css/form.css">
</head>
<body>
<form action="#" method="post" id="theForm">
<fieldset><legend>Enter an Item To Be Done</legend>
<div><label for="task">Task</label><input type="text" name="task" id="task" required></div>
<input type="submit" value="Add It!" id="submit">
<div id="output"></div>
<p id='test'> -- </p>
</fieldset>
</form>
<script src="js/utilities10.js"></script>
<script src="js/tasks10.js"></script>
</body>
</html>
tasks10.js
(function() { // immediately invoked function
'use strict';
//window.addEventListener('onsubmit',U.plusTask,false);
U.$('theForm').onsubmit = U.plusTask;
})(); // End of anonymous function.
utilities10.js
var U = {
// For getting the document element by ID:
$: function(id) {
'use strict';
if (typeof id == 'string') {
//alert("cxcwcw $"+ id);
return document.getElementById(id);
}
}, // End of $() function.
plusTask : function() {
var tasks = [];
// Function called when the form is submitted.
// Function adds a task to the global array.
function innerCalculate(){
alert(tasks.length);
'use strict';
// Get the task:
//var task =this.$('task');
var task =U.$('task'); alert("task : " + task);
//var task =document.getElementById('task');
// Reference to where the output goes:
//var output = this.$('output');
var output = U.$('output');
//var output = document.getElementById('output');
alert("in");
// For the output:
var message = '';
if (task.value) {
U.$('test').innerHTML = tasks.length;
//document.getElementById('test').innerHTML = tasks.length;
// Add the item to the array:
tasks.push(task.value);
// Update the page:
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';
}
message += '</ol>';
output.innerHTML = message;
} // End of task.value IF.
// Return false to prevent subssmission:
return false;
} // End of innerCalculate
innerCalculate();
} // End of plusTask function
} // End of U
3 answers
solution1
0 2016-08-27 16:28:35
The plusTask function resets all of its local variables every time it's called.
I think you meant to use an IIFE to create a closure. Also, this.tasks[i] should be tasks[i] .
plusTask : (function() { // IIFE
var tasks = [];
function innerCalculate() {
alert(tasks.length);
'use strict';
var task = U.$('task');
alert("task : " + task);
var output = U.$('output');
alert("in");
var message = '';
if (task.value) {
U.$('test').innerHTML = tasks.length;
tasks.push(task.value);
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + ' - ' + count + '</li>';
}
message += '</ol>';
output.innerHTML = message;
}
return false;
}
return innerCalculate; // return closure
})() // invoke plusTask IIFE
solution2
0 2016-08-27 16:39:31
On line 44 you had:
message += '<li>' + this.tasks[i] + ' - ' + count + '</li>';
But the tasks you wanted are the one from the closure, while "this" is Window. So instead you want:
message += '<li>' + tasks[i] + ' - ' + count + '</li>';
Additionally, if you pressed submit here it would reload the page. So plusTask should start something like this:
plusTask : function(event) {
event.preventDefault();
...
solution3
0 2016-08-27 22:05:57
Bemmu, Castle, good job! I should have thought about closure and missed using this. Final js code is doing the job. Thank you both. :
<pre>
plusTask : (function(e) { // IIFE
var tasks = [];
function innerCalculate(e) {
if(typeof e == 'undefined') e = window.event;
alert(tasks.length);
'use strict';
var task = U.$('task');
alert("task : " + task);
var output = U.$('output');
alert("in");
var message = '';
if (task.value) {
U.$('test').innerHTML = tasks.length;
tasks.push(task.value);
message = '<h2>To-Do</h2><ol>';
for (var i = 0, count = tasks.length; i < count; i++) {
message += '<li>' + tasks[i] + ' - ' + count + '</li>';
}
message += '</ol>';
output.innerHTML = message;
}
// Return false to prevent submission:
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
return false;
}
return innerCalculate; // return closure
})() // invoke plusTask IIFE
</pre>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.