Talk:Web Design/JavaScript Challenges
Add topic // you only need the following line if you don't already
// have a variable for your quantity field.
var email = document.getElementById("email");
// First, create a variable to remember the position of the "@" symbol
var atPos = email.value.indexOf("@");
if (atPos == ??) // you need to replace the question marks with
{
// Then there wasn't any @ symbol within the email address!
// Let the user know that they need to correct the error!
// Add your code below:
// Lastly, return false so that the form won't be submitted.
return false;
}
you need to replace the question marks with... With what? Stuck here.
We should also invest in some syntax highlighting. --64.129.128.2 21:01, 11 January 2007 (UTC)
onsubmit or onSubmit
[edit source]Hi 72.49.106.105 (whover that IP maps to!)
Thanks for getting in and editing the Javascript challenges! Just a note, onsubmit should actually be all lower case for XHTML... but you're right, in HTML 4 it was onSubmit (I think?). I've changed it back for the moment... hope that's ok!
- Sorry, yeah that IP is me, I'm totally new to JScipt but have been studying web design for 5 years. I'm looking at the javascript cheat sheet from ilovejackdaniels.com ans it has onSubmit. I know that JS is pretty sketchy when it somes to case sensitivity. When i ran it with onSubmit on my home server it worked... It really makes no difference to me I'm trying to learn it and am not a prof by any means. -- Koolaidman Talk Contribs 02:45, 11 February 2007 (UTC)
- Great! I hope you find the resources here useful... and please continue to update and improve them as you go :) Yeah, I noticed the Jack Daniels cheat sheet uses onSubmit form for events. The main thing is (1) that you're consistent, then your JS code will work either way. But to get your XHTML files to validate you'll need to use lower case. Hope that helps Michaelnelson 00:48, 12 February 2007 (UTC)
- Thanks, I'll have to take a look at the standards for event handlers, I haven't really paid much attention to them prior to now. -- Koolaidman Talk Contribs 01:51, 12 February 2007 (UTC)
Challenge 5
[edit source]"For example, isNaN(1.5) will return true, whereas isNaN("hi there") will return false." I'm learning so I don't really want to edit this myself, but I'm pretty sure this can't be right. Atleast not according to the W3 demo that is referred to...
- Thanks annon!! Fixed up now. Michaelnelson 03:06, 30 July 2007 (UTC)
W3Schools.com Down?
[edit source]Is it just me or is w3schools down at the moment? I got frustrated with not being able to reference w3s while working on example #5 a few days ago and the site hasn't been up since. TMyhres 06:32, 21 September 2007 (UTC)
Challenge 4 to 7 using Switch Statements
[edit source]!! While putting this up i noticed wiki makes my code UNREADABLE! Copy/paste this in your text editor and format , i promise you that you will understand it much better :) btw my comments can also be a bit intrusive so remove them after you read through them GOOD LUCK!!
<!DOCTYPE html> <html lang="en"> <head> <title>JavaScript Challenges</title> <style> .errormsg { display: none; color: red; } .qerrormsg { display: none; color: red; } </style> </head> <body> <form action="mailto:me@fakeemail.com" id="userfeedbackform"> <fieldset> <legend>Personal details</legend> <p> <label> Full name: <input type="text" name="fullname" id="fullname"> </label> </p> <p class="errormsg" id="nameerrormsg">Please enter your name above.</p> <p> <label> Street Address: <input type="text" name="streetaddr" id="streetaddr"> </label> </p> <p class="errormsg" id="addrerrormsg">Please enter your street address.</p> <p> <label> Quantity: <input type="text" name="Quantity" id="Quantity" maxlength="4"> </label> </p> <p class="errormsg" id="posterrormsg">Please enter your postcode.</p> <p class="qerrormsg" id="qerrormsg">You can only enter numbers</p> </fieldset> <input type="submit" value="Submit it!"> </body> <script>
/* notice how i put my script at the end of my document instead of the head, that way i make sure the document is loaded and i dont have to call for onload="" to read the body first */
document.getElementById("userfeedbackform").onsubmit = checkForm;
function checkForm() {
/* convert everything into a var for easy re-use */
var nameError = document.getElementById("nameerrormsg");
var adressError = document.getElementById("addrerrormsg");
var addressField = document.getElementById("streetaddr").value;
var nameField = document.getElementById("fullname").value;
var posterrormsg = document.getElementById("posterrormsg");
var quantityField = document.getElementById("Quantity").value;
var quantity = isNaN(document.getElementById("Quantity").value);
var qerrormsg = document.getElementById("qerrormsg");
/* switch statement with parameter (true) , this will make it look for a case with the value the of true [1]*/
switch (true) {
/* [1] the swith statement found a case being true and will excecute ALL the code inside*/
case (true):
/* now here you will see 4 different switch statements [2] with parameter true, this time it has the option
between 2 cases [3], it will execute the case that returns true*/
/* [2] */ switch (true) {
/*[3] this is one of the 2 cases, here the switch statement will check if (nameField.length <1 ) is true,
if not it will check the next case */
case (nameField.length < 1):
nameError.style.display = 'inline';
/* if the Namefield input is not filled in it will desplay the error code and more importantly it will prevent
the the form from being submitted ! */
event.preventDefault();
break;
/* [3] the second possible case is that the input field is filled in
,important is that you make the error message disappear in case it was displayed before! */
case (nameField.length > 1):
/* Changes error message to 'none' , in case it was not displayed then nothing happens*/
nameError.style.display = 'none';
break;
}
/* check if addresField is filled in, same as switch statement above */
/* [2] */ switch (true) {
case (addressField.length < 1):
adressError.style.display = 'inline';
/* repeat event.preventDefault() because if we only do it for Namefield then the moment the namefield is filled in but the addressField is NOT, it will still submit form because it only checked nameField*/
event.preventDefault();
break;
case (addressField.length > 1):
adressError.style.display = 'none';
break;
}
/* check if quantity field is filled in, same as the 2 previous switch statements */
/* [2] */ switch (true) {
case (quantityField.length < 1):
posterrormsg.style.display = 'inline';
event.preventDefault();
break;
case (quantityField.length > 1):
posterrormsg.style.display = 'none';
break;
}
/* check if the input of quantityField is a number or not */
/* [2] */ switch (true) {
case (quantity == true):
qerrormsg.style.display = 'inline';
event.preventDefault();
break;
case (quantity == false):
qerrormsg.style.display = 'none';
break;
}
/* in case you did not know, you need a break after every
case otherwise it will excecute the other case too and we only want one
case to be excecuted*/
break;
} }
</script> </html>