javascript problem with embed tag and form elements

[windsorben]

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]

[acoder]

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

PS. changed the thread title.

[windsorben]

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.

[windsorben]

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.

[acoder]

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:

var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
  // inputs[0] would be the first input text box...
}

[acoder]

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:

if(document.myform.inputs[i].value.toLowerCase()==answer[i]){

I don't see a form element named "inputs".

[windsorben]

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!

var score = 0;
var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
var inputs = document.getElementsByTagName('input');
 
function check(){
for (i = 0; i < inputs.length; i++) {
  // inputs[0] would be the first input text box...
if(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="visible";
document.getElementById(str2).style.visibility="hidden";
document.myform.score.value=score;
document.myform.percentage.value=percentage;
document.myform.time.value=getLessonTime();
document.myform.time.value=getLessonTime();
 
}
 
else
 
{
 
if(inputs[i].value!=""){
 
inputs[i].value="Try Again";
 
var p=i+1;
 
var str="showpicture"+p;
var str2="showwrong"+p;
 
document.getElementById(str).style.visibility="hidden";
document.getElementById(str2).style.visibility="visible";
}}}
 
score = 0;
 
}
 
function validateForm(myform) {
 
if (myform.score.value < 8) {
   alert("You must get at least 8 problems correct.  Keep trying!");
   return false;
   }
}
 
 

[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:

var inputs = document.getElementsByTagName("input");
for (i = 0; i < inputs.length; i++) {
  // inputs[0] would be the first input text box...
}

[windsorben]

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!

[acoder]

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.

[acoder]

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.

[windsorben]

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...

}
var score = 0;
var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
var inputs = document.getElementsByTagName('input');
 
function check(){
for (i = 0; i < inputs.text.length; i++) {
  // inputs[0] would be the first input text box...
if(inputs[i].text.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="visible";
document.getElementById(str2).style.visibility="hidden";
document.myform.score.value=score;
document.myform.percentage.value=percentage;
document.myform.time.value=getLessonTime();
document.myform.time.value=getLessonTime();
 
}
 
else
 
{
 
if(inputs[i].text.value!=""){
 
inputs[i].text.value="Try 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.

[acoder]

Please use code tags when posting code. Thanks!

To check the type, use:

if (inputs[i].type == "text") { ...

[windsorben]

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!

var score = 0;
var answer = new Array("pass","brag","drag","began","else","held","felt","kept","smell");
var inputs = document.getElementsByTagName('input');
 
function check(){
for (i = 0; i < inputs.length; i++) {
 
 
// inputs[0] would be the first input text box...
if (inputs[i].type == "text") {
    if(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="visible";
document.getElementById(str2).style.visibility="hidden";
document.myform.score.value=score;
document.myform.percentage.value=percentage;
document.myform.time.value=getLessonTime();
document.myform.time.value=getLessonTime();
 
}}
 
else
 
{
 
if (inputs[i].type == "text") {
    if(inputs[i].value!=""){
 
inputs[i].value="Try Again";
 
var p=i+1;
 
var str="showpicture"+p;
var str2="showwrong"+p;
 
document.getElementById(str).style.visibility="hidden";
document.getElementById(str2).style.visibility="visible";
}}}}
 
score = 0;
 
}

Please use code tags when posting code. Thanks!

To check the type, use:

if (inputs[i].type == "text") { ...

[acoder]

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.