By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,939 Members | 1,670 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,939 IT Pros & Developers. It's quick & easy.

javascript problem with embed tag and form elements

P: 23
I have some javascript that checks whether or not an answer is correct. It was working fine when the question was asked with text but now that I'm asking the question with audio, the javascript no longer works. (I think it is considering the embed tag as an element in my form and I think that's causing the problem.) I think adding and specifying to only look at a div tag within the form would solve the problem but I'm not sure. Can someone check this out and see if you have a solution?

//this checks whether the answer is correct (worked fine when question was typed in text but no longer works when the question is asked with audio).

[HTML]var score = 0;
var answer = new Array("pass","brag","drag","began","else","held"," felt","kept","smell");

function check(){

for(i=0;i<answer.length;i++){
//answer.lenght is the lenght of the answer array
if(document.myform.inputs[i].value.toLowerCase()==answer[i]){

score++;
var p=i+1;

var str="showpicture"+p;
var str2="showwrong"+p;
var score2=score/9*100
var percentage=score2.toFixed(0) + '%';
document.getElementById(str).style.visibility="vis ible";
document.getElementById(str2).style.visibility="hi dden";
document.myform.score.value=score;
document.myform.percentage.value=percentage;
document.myform.time.value=getLessonTime();
document.myform.time.value=getLessonTime();

}

else

{

if(document.myform.elements[i].value!=""){

document.myform.elements[i].value="Try Again";

var p=i+1;

var str="showpicture"+p;
var str2="showwrong"+p;

document.getElementById(str).style.visibility="hid den";
document.getElementById(str2).style.visibility="vi sible";
}}}

score = 0;

}

//heres the beginning of the form (I think the embed tag is causing the problem)

<form name="myform" method="post" action="<cfoutput>#CurrentPage#?#CGI.QUERY_STRING# </cfoutput>" onSubmit="return validateForm(this)"">
<p>&nbsp;</p>
<p align="right" class="smalltext">Activity # 2019 </p>
<table border="1" align="center" cellpadding="5" cellspacing="1" bordercolor="#D5CCBB" bgcolor="#000000">
<tr>
<td width="200" bgcolor="#00FF00" class="bigtext"><div align="center">Problem</div></td>
<td width="100" bgcolor="#00FF00" class="bigtext"><div align="center">Answer</div></td>
<td width="100" bgcolor="#00FF00" class="bigtext"><div align="center">Feedback</div></td>
</tr>
<tr>
<td bordercolor="#D5CCBB" bgcolor="#FFFF00" class="bigbluetext"><p><span class="previewDiv" style="WIDTH: 240px; HEIGHT: 27px">
<embed name="" src="../media/spellingwords/1.mp3" width="240" height="27" type="audio/x-wav" alt="Click play button to hear word." autoplay="false" controller="true" loop="false" /> </embed>
</span></p> </td>
<td bordercolor="#D5CCBB" bgcolor="#FFFF00"><label><div>
<input type="text" name="1" size="8" onBlur="check()" />
</label></td>
<td bgcolor="#FF0000">
<img src="../images/generalimages/star.gif" alt="Correct" width="48" height="44" id="showpicture1" style="visibility:hidden;" /><img src="../images/generalimages/blackx.gif" alt="Wrong" width="48" height="44" id="showwrong1" style="visibility:hidden;" /></td>[/HTML]
Nov 27 '07 #1
Share this Question
Share on Google+
13 Replies


acoder
Expert Mod 15k+
P: 16,027
Instead of the elements array, why not access the form elements directly?

PS. changed the thread title.
Nov 27 '07 #2

P: 23
Thanks, since my form has nine fields, would I have to call up each field separately or is there still some way to make it work with an array, and if so, would you mind showing me what that would look like? Thanks "acoder," I really appreciate all of your help! I'm getting better at this but javascript has been a tough one for me to learn...


Instead of the elements array, why not access the form elements directly?

PS. changed the thread title.
Nov 27 '07 #3

P: 23
Acoder,

What I don't understand is that my original code works fine in Firefox but it doesn't work in IE. I tried making some changes but still no luck in IE.
Thanks for any ideas you can give me.
Nov 28 '07 #4

acoder
Expert Mod 15k+
P: 16,027
Thanks, since my form has nine fields, would I have to call up each field separately or is there still some way to make it work with an array, and if so, would you mind showing me what that would look like?
You could use document.getElementsByTagName('input') which would get all the input elements. If you only have input elements of type "text" and no other input elements (i.e. the ones that you need to check), then you can just use that array:
Expand|Select|Wrap|Line Numbers
  1. var inputs = document.getElementsByTagName("input");
  2. for (i = 0; i < inputs.length; i++) {
  3.   // inputs[0] would be the first input text box...
  4. }
Nov 28 '07 #5

acoder
Expert Mod 15k+
P: 16,027
Acoder,

What I don't understand is that my original code works fine in Firefox but it doesn't work in IE. I tried making some changes but still no luck in IE.
Thanks for any ideas you can give me.
On line 8 (post #1), you have:
Expand|Select|Wrap|Line Numbers
  1. if(document.myform.inputs[i].value.toLowerCase()==answer[i]){
I don't see a form element named "inputs".
Nov 28 '07 #6

P: 23
Hi Acoder,
Well, it is working better but now my submit button reads "Try Again." I don't understand because it is type "submit" not type "text." Also, I end up getting a funny score with this new code. Any ideas? Thanks again!

Expand|Select|Wrap|Line Numbers
  1. var score = 0;
  2. var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
  3. var inputs = document.getElementsByTagName('input');
  4.  
  5. function check(){
  6. for (i = 0; i < inputs.length; i++) {
  7.   // inputs[0] would be the first input text box...
  8. if(inputs[i].value.toLowerCase()==answer[i]){
  9.  
  10. score++;
  11. var p=i+1;
  12.  
  13. var str="showpicture"+p;
  14. var str2="showwrong"+p;
  15. var score2=score/9*100
  16. var percentage=score2.toFixed(0) + '%';
  17. document.getElementById(str).style.visibility="visible";
  18. document.getElementById(str2).style.visibility="hidden";
  19. document.myform.score.value=score;
  20. document.myform.percentage.value=percentage;
  21. document.myform.time.value=getLessonTime();
  22. document.myform.time.value=getLessonTime();
  23.  
  24. }
  25.  
  26. else
  27.  
  28. {
  29.  
  30. if(inputs[i].value!=""){
  31.  
  32. inputs[i].value="Try Again";
  33.  
  34. var p=i+1;
  35.  
  36. var str="showpicture"+p;
  37. var str2="showwrong"+p;
  38.  
  39. document.getElementById(str).style.visibility="hidden";
  40. document.getElementById(str2).style.visibility="visible";
  41. }}}
  42.  
  43. score = 0;
  44.  
  45. }
  46.  
  47. function validateForm(myform) {
  48.  
  49. if (myform.score.value < 8) {
  50.    alert("You must get at least 8 problems correct.  Keep trying!");
  51.    return false;
  52.    }
  53. }
  54.  
  55.  
[HTML]</script>

//here's the submit button
<input type="submit" name="Submit" value="Send My Score!">
<input type="hidden" name="score" value="">
<input name="time" type="hidden" id="time" value="">
<input type="hidden" name="date" value="<cfoutput>#DateFormat(Now(), "MM/DD/YY")# At #TimeFormat(Now(),"hh:mm tt")#</cfoutput>" size="32">
<input type="hidden" name="studentid" value="<cfoutput>#Session.MM_Username#</cfoutput>">
<input type="hidden" name="MM_InsertRecord" value="form1">
<input name="pointpossible" type="hidden" value="9">
<input type="hidden" name="percentage" id="percentage" value=""/>
<input type="hidden" name="activityid" value="2019">
</div>
</form>[/HTML]


You could use document.getElementsByTagName('input') which would get all the input elements. If you only have input elements of type "text" and no other input elements (i.e. the ones that you need to check), then you can just use that array:
Expand|Select|Wrap|Line Numbers
  1. var inputs = document.getElementsByTagName("input");
  2. for (i = 0; i < inputs.length; i++) {
  3.   // inputs[0] would be the first input text box...
  4. }
Nov 29 '07 #7

P: 23
Acoder,
I'm beginning to think that I'll just embed the sound files outside of the form. I guess I should just keep it simple stupid (that's me--not you--you're a genius).

Any good recommendations on learning javascript?
Thanks!
Nov 29 '07 #8

acoder
Expert Mod 15k+
P: 16,027
Hi Acoder,
Well, it is working better but now my submit button reads "Try Again." I don't understand because it is type "submit" not type "text." Also, I end up getting a funny score with this new code. Any ideas? Thanks again!
That's because it's only checking for input tags, so all input tags are accessed including submit, hidden, radio, checkbox, reset, text, etc. You would have to check for the type of the input tags to filter out the rest.
Nov 29 '07 #9

acoder
Expert Mod 15k+
P: 16,027
Acoder,
I'm beginning to think that I'll just embed the sound files outside of the form. I guess I should just keep it simple stupid (that's me--not you--you're a genius).
Haha, careful! That seems like a good idea. Take the simple approach.
Any good recommendations on learning javascript?
Thanks!
Check out the Offsite Links sticky thread. The W3Schools website is highly recommended to get you started - and it has a good JavaScript/DOM reference too.
Nov 29 '07 #10

P: 23
I did this but obviously it didn't work:. I don't know exactly how to specify (or where) the type (text). Thanks and sorry to be a pest...

Expand|Select|Wrap|Line Numbers
  1. }
  2. var score = 0;
  3. var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
  4. var inputs = document.getElementsByTagName('input');
  5.  
  6. function check(){
  7. for (i = 0; i < inputs.text.length; i++) {
  8.   // inputs[0] would be the first input text box...
  9. if(inputs[i].text.value.toLowerCase()==answer[i]){
  10.  
  11. score++;
  12. var p=i+1;
  13.  
  14. var str="showpicture"+p;
  15. var str2="showwrong"+p;
  16. var score2=score/9*100
  17. var percentage=score2.toFixed(0) + '%';
  18. document.getElementById(str).style.visibility="visible";
  19. document.getElementById(str2).style.visibility="hidden";
  20. document.myform.score.value=score;
  21. document.myform.percentage.value=percentage;
  22. document.myform.time.value=getLessonTime();
  23. document.myform.time.value=getLessonTime();
  24.  
  25. }
  26.  
  27. else
  28.  
  29. {
  30.  
  31. if(inputs[i].text.value!=""){
  32.  
  33. inputs[i].text.value="Try Again";
  34.  
That's because it's only checking for input tags, so all input tags are accessed including submit, hidden, radio, checkbox, reset, text, etc. You would have to check for the type of the input tags to filter out the rest.
Nov 30 '07 #11

acoder
Expert Mod 15k+
P: 16,027
Please use code tags when posting code. Thanks!

To check the type, use:
Expand|Select|Wrap|Line Numbers
  1. if (inputs[i].type == "text") { ...
Nov 30 '07 #12

P: 23
I added the input types below but must have done something wrong because it doesn't work. Let me know if you see what I did wrong. Thanks!


Expand|Select|Wrap|Line Numbers
  1. var score = 0;
  2. var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
  3. var inputs = document.getElementsByTagName('input');
  4.  
  5. function check(){
  6. for (i = 0; i < inputs.length; i++) {
  7.  
  8.  
  9. // inputs[0] would be the first input text box...
  10. if (inputs[i].type == "text") {
  11.     if(inputs[i].value.toLowerCase()==answer[i]){
  12.  
  13. score++;
  14. var p=i+1;
  15.  
  16. var str="showpicture"+p;
  17. var str2="showwrong"+p;
  18. var score2=score/9*100
  19. var percentage=score2.toFixed(0) + '%';
  20. document.getElementById(str).style.visibility="visible";
  21. document.getElementById(str2).style.visibility="hidden";
  22. document.myform.score.value=score;
  23. document.myform.percentage.value=percentage;
  24. document.myform.time.value=getLessonTime();
  25. document.myform.time.value=getLessonTime();
  26.  
  27. }}
  28.  
  29. else
  30.  
  31. {
  32.  
  33. if (inputs[i].type == "text") {
  34.     if(inputs[i].value!=""){
  35.  
  36. inputs[i].value="Try Again";
  37.  
  38. var p=i+1;
  39.  
  40. var str="showpicture"+p;
  41. var str2="showwrong"+p;
  42.  
  43. document.getElementById(str).style.visibility="hidden";
  44. document.getElementById(str2).style.visibility="visible";
  45. }}}}
  46.  
  47. score = 0;
  48.  
  49. }


Please use code tags when posting code. Thanks!

To check the type, use:
Expand|Select|Wrap|Line Numbers
  1. if (inputs[i].type == "text") { ...
Dec 1 '07 #13

acoder
Expert Mod 15k+
P: 16,027
I added the input types below but must have done something wrong because it doesn't work. Let me know if you see what I did wrong. Thanks!
The "var inputs = ..." line should be inside the check() function.
Dec 1 '07 #14

Post your reply

Sign in to post your reply or Sign up for a free account.