[Chapter 10 Working With Forms]

Thank you for your help. I set up a similar event testing function, and it turns out that the keydown was creating some issues, since it was not firing when I expected. BTW, the reason "nothing was working" was because I didn't start my server. I was so preoccupied with trying to get this to work, that I ignored the simple things. I remembered that Larry wrote to just step away, eat an apple...and then come back fresh, and all of a sudden everything was making sense. Thank you for all your help yet again.

[Chapter 10 Working With Forms]

Is it possible to select an attribute of an input tag? For example, if you had:

<input type="text" value="Your Name">

Is it possible to select the value attribute of the input tag?

[Chapter 10 Working With Forms]

Thank you for your help. I am afraid that now nothing works. I am really confused, so I will start at the beginning. How would you select multiple form elements including a text area?

[Chapter 10 Working With Forms]

I tried posting the relevant HTML, but it will not render. Sorry.

[Chapter 10 Working With Forms]

I was thinking about using the label like this (var form = document.getElementById('caseEval'); form.getElementsByTagName('label') ) and moving it dynamically into the text box, so that users w/out Javascript would have the same functionality with the form, although, I am not sure that that would solve my phase problem. I have so many ideas, just difficulty executing them. The code you requested is below. It seems repetitive, but I don't know how else to reference target and event.

 

As always, very grateful for your time and help.

 

 

function setOpacity(evt) {
'use strict';

if (!evt) evt = window.evt;

// prevent default behavior
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}

// get reference to element triggering the event
var target = evt.target || evt.srcElement;

// set opacity of target element text
if ( target.value === target.defaultValue) {
target.style.color = '#c8c8c8';
target.style.backgroundColor = '#fff';
target.setSelectionRange(0,0);
}

 

function addPlaceholder(evt) {
'use strict';

if (!evt) evt = window.evt;

var target = evt.target || evt.srcElement;

if ( (target.value === '') || (target.value === target.defaultValue) ) {
target.value = target.defaultValue;
target.style.color ='#7a7a7a';
target.style.backgroundColor = '#e9e9e9';
}

} // end of addPlaceholder function

[Chapter 10 Working With Forms]

I am going through chapter 10 and I have run into a problem with focus and blur events on multiple form elements. I have a function which adds multiple events and handlers to elements.

 

function addPlaceholderHandlers(elem) {
'use strict';

elem.onfocus = setOpacity;
elem.onkeydown = removePlaceholder;
elem.onblur = addPlaceholder;

} // end of addPlaceholderHandlers function

 

Then I run the following code in window.onload

 

window.onload = function() {
'use strict';

var elements = document.getElementById('caseEval').childNodes;
for (var i = 0, count = elements.length; i < count; i++) {
var element = elements[i];

addPlaceholderHandlers(element);
}
};

 

 

The onkeydown is the only code that actually runs, and I suspect that this is so because the focus and blur events do not bubble. The obvious solution is to use the addEventHandler and set the phase to true to "capture" the event, however, I am not aware that IE has an equivalent for phase. Aside from referencing each individual element, adding the event to each element, and then setting an event handler for each individual element, is there a better alternative for selecting multiple elements when using the focus and blur?or should I change my event handlers to something other then:

 

function removePlaceholder(evt) {
'use strict';

// get reference to the event
if (!evt) evt = window.evt;

// element triggering the event
var target = evt.target || evt.srcElement;

if (target.value === target.defaultValue) {
target.value = '';
}

target.style.color = '#000';

} // end of removePlaceholder function

 

I would just like to add that I absolutely love this book and the support in this forum. I have never done any programming until three or so weeks ago, and I didn't even know what HTML was just a few weeks prior to that. I feel that this book is so well written, concise in its examples, and relevant that it should be in every beginners and maybe some intermediate programmer's bookshelf. You have definitely gained a lifelong reader.

[Chapter 8 Review An Pursue]

Ok. Thank you for responding. At first I must admit I was confused. I did as you suggested, and looked up some ECMAScript specs and read chapter 9 which covered DOM in detail and I am further enlightened, although a little intimidated by the vast amount of possibilities and the realization of just how much I don't know. Thank you again for all your help.

[Chapter 8 Review An Pursue]

That is correct events.js works. Five weeks ago I didn't know what HTML was, so you will have to forgive me that I am not in the point at the book where debugging is covered, so I am not certain where to even begin, much less how. I will tell you however, that the set handlers function is the same in both events.js and events2.js. I do have return false at the end of set handlers, and the addEvent function works with my other examples. After closer examination of chapter 8, I found this interesting tidbit:

 

 

"The problem with returning false to prevent the default browser behavior is that it only works reliably when the event listener was registered using the traditional approach. For example, say events.js added the form submission event handler using the newer approach: U.addEvent( U. $(' theForm'), 'submit', setHandlers); With that code, you would see that the form’s submission would go through, meaning that the form itself would be reset (upon resubmission) and the event listeners would not be present (they would have been created, but reset upon submission)."

 

Ullman, Larry (2012-02-21). Modern Javascript: Develop and Design (p. 298). Pearson Education (US). Kindle Edition.

 

After changing the function to use preventDefault it is now working. I still don't understand why though. Perhaps you can shed some light on that for me. And if you are feeling particularly bored & giving, maybe you can explain to me why the following function accepts an object as its first argument:

 

 // for creating event listeners
addEvent: function(obj, type, fn) {
'use strict';
if (obj && obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) {
obj.attachEvent('on' + type, fn);
}
}, // end of addEvent function

 

I really appreciate your help. It has been invaluable to my learning. Thank you again, HartleySan.

[Chapter 8 Review An Pursue]

in chapter 8 there is a file (events2.js) updated to use the Utilities Object. However, when linked to events.html the code does not work. It resets the form on submit.

 

The difference I found is the anonymous function called for the onload event of the window object. What I don't understand is why the events2.js doesn't work:

 

---- events2.js ----

window.onload = function() {
'use strict';
U.addEvent(U.$('theForm'), 'submit', setHandlers);
};

 

---- events.js ----

window.onload = function() {
'use strict';
U.$('theForm').onsubmit = setHandlers;
};

 

---- addEvent() ----

 addEvent: function(obj, type, fn) {
'use strict';
if (obj && obj.addEventListener) { // W3C
obj.addEventListener(type, fn, false);
} else if (obj && obj.attachEvent) { // Older IE
obj.attachEvent('on' + type, fn);
}
}, // End of addEvent() function.

[Chapter 6 Review And Pursue]

I figured it out. I placed the var message containing the opening tag of the ordered list within the for loop, creating a new list each time.

Thank you for your help.

[Chapter 6 Review And Pursue]

I have done as you suggested and the elements in the array are being displayed. However, with each new item added the first item is deleted, displaying only the last item, instead of an ordered list.

 

 

 // create a new object
var employee = {
firstName: firstName,
lastName: lastName,
department: department,
hireDate: new Date(),
getName: function(){
return this.lastName + ', ' + this.firstName;
}
};

// add items to an array
newHires.push(employee.firstName);

// create output as HTML
for (var i = 0, counter = newHires.length; i < counter; i++) {
var message = '
[b]	Employee Added:[/b]
[list=1]
';
message += '	[*]' + newHires[i] + '
';
}
message += '
[/list]
';

// display the employee object
output.innerHTML = message;

[Chapter 6 Review And Pursue]

For the last exercise in review and pursue: "If you’re feeling particularly confident, combine the techniques demonstrated in tasks.js and employee.js so that an array of employee objects is created." (p. 218).

 

How does one proceed to create an array of objects? I am quite lost. Most of my attempts have resulted in [object Object] being returned or an ordered list listing each object element under a new list item. The original code is:

 

 

 

 

 

// employee.js
// This script creates an object using form data.

// Function called when the form is submitted.
// Function creates a new object.
function process() {
'use strict';

// Get form references:
var firstName = document.getElementById('firstName').value;
var lastName = document.getElementById('lastName').value;
var department = document.getElementById('department').value;

// Reference to where the output goes:
var output = document.getElementById('output');

// Create a new object:
var employee = {
firstName: firstName,
lastName: lastName,
department: department,
hireDate: new Date()
}; // Don't forget the semicolon!

console.log(employee);

// Create the ouptut as HTML:
var message = '
[b]	Employee Added[/b]

Name: ' + employee.lastName + ', ' + employee.firstName + '
';
message += 'Department: ' + employee.department + '
';
message += 'Hire Date: ' + employee.hireDate.toDateString();

// Display the employee object:
output.innerHTML = message;

// Return false:
return false;

} // End of process() function.

// Initial setup:
function init() {
'use strict';
document.getElementById('theForm').onsubmit = process;
} // End of init() function.
window.onload = init;