Jump to content
Larry Ullman's Book Forums

Recommended Posts

This is my HTML

<form id="form" method="post">


First Name :
<input type="text" id="fname" name="fname">
<br>


Last Name :
<input type="text" id="lname" name="lname">
<br>
Department :


<select name="department" id="department">
<option value="accounts">Accounts</option>
<option value="hr">HR</option>
<option value="it">Information Technology</option>


<input type="submit" id="submit" value="Add Employee">


<div id="output"></div>
</form>
</select>

This is my CSS !

function calculate(){
'use strict';


var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var depart = document.getElementById('department').value;


var output = document.getElementById('output');


var employee = {
firstname:fname,
lastname:lname,
department:depart,
hireDate:new Date()
};


var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  
msg += 'Department :  ' + employee.department + '<br>';
msg += 'Hire Date :  ' + employee.hireDate.toDateString();


output.innerHTML = msg;
}




function init()
{
'use stric';
var form = document.getElementById('form');
form.onsubmit = calculate;
}; // end init()


window.onload = calculate;

For unknown reason i cant figured it out what is the problem please help

 

Link to comment
Share on other sites

It doesn`t work either hartley ! this is from chapter 6 [complex variable type] on page 212, its about working with array. 

 

Before this example there also one in this book that is also not working it is on page 196 chapter 6 [complex variable type] and it is for working with objects

Link to comment
Share on other sites

Are you saying that the JS is catching the form submit, and then outputting the department and the hiring date, but not the first and last name?

 

Please do me the following favor:

In Chrome, load your console up, right-click in the console and select "Preserve log upon navigation", and then add the following line to your code and execute your code:

 

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  
msg += 'Department :  ' + employee.department + '<br>';
msg += 'Hire Date :  ' + employee.hireDate.toDateString();


console.log(employee.firstname, employee.lastname, employee.department, employee.hireDate);


output.innerHTML = msg;
 
Please let us know what you find.
Thank you.
Link to comment
Share on other sites

Yes hartleysan, after the script you have submitted it shows this

 

Employee Added

Name : undefinedundefined                    // undefined first and last name. They are still undefined
Department : IT                            // It is changing now
Hire Date : Wed Jan 15 2014                  // date is this

 

In console it is that

 

// undefined undefined "accounts" Wed Jan 15 2014 06:22:11 GMT-0800 (Pacific Standard Time)

 

i have found one error in my code and that was here in :

 

function init()

{
'use strict';
var form = document.getElementById('form');
form.onsubmit = calculate;
}; // end init()
 
 
window.onload = calculate;            // Instead of init; i placed here calculate();  
Link to comment
Share on other sites

ionezation, thanks for sending me your code.

After getting the real code and being able to test it out myself, I quickly found the problem.

 

You need to change the following line:

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstname +  employee.lastname + '<br>';  

As follows:

var msg = '<h2>Employee Added</h2> Name :  ' + employee.firstName +  employee.lastName + '<br>';  

In other words, firstname and lastname need to be changed to their camel case variations firstName and lastName.

 

While those two simple changes will get your code working, there are a number of other things I would do to change your code, but I'll leave it at that for now.

  • Upvote 1
Link to comment
Share on other sites

With most (if not all) errors in the Chrome console, they also print out a line number in your code. You can click on that line number to view the exact spot where the error occurred in your code.

You can also set up breakpoints, etc. in your code from Chrome Dev Tools.

Link to comment
Share on other sites

 Share

×
×
  • Create New...