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","b rag","drag","be gan","else","he ld","felt","kep t","smell");

function check(){

for(i=0;i<answe r.length;i++){
//answer.lenght is the lenght of the answer array
if(document.myf orm.inputs[i].value.toLowerC ase()==answer[i]){

score++;
var p=i+1;

var str="showpictur e"+p;
var str2="showwrong "+p;
var score2=score/9*100
var percentage=scor e2.toFixed(0) + '%';
document.getEle mentById(str).s tyle.visibility ="visible";
document.getEle mentById(str2). style.visibilit y="hidden";
document.myform .score.value=sc ore;
document.myform .percentage.val ue=percentage;
document.myform .time.value=get LessonTime();
document.myform .time.value=get LessonTime();

}

else

{

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

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

var p=i+1;

var str="showpictur e"+p;
var str2="showwrong "+p;

document.getEle mentById(str).s tyle.visibility ="hidden";
document.getEle mentById(str2). style.visibilit y="visible";
}}}

score = 0;

}

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

<form name="myform" method="post" action="<cfoutp ut>#CurrentPage #?#CGI.QUERY_ST RING#</cfoutput>" onSubmit="retur n validateForm(th is)"">
<p>&nbsp;</p>
<p align="right" class="smalltex t">Activity # 2019 </p>
<table border="1" align="center" cellpadding="5" cellspacing="1" bordercolor="#D 5CCBB" bgcolor="#00000 0">
<tr>
<td width="200" bgcolor="#00FF0 0" class="bigtext" ><div align="center"> Problem</div></td>
<td width="100" bgcolor="#00FF0 0" class="bigtext" ><div align="center"> Answer</div></td>
<td width="100" bgcolor="#00FF0 0" class="bigtext" ><div align="center"> Feedback</div></td>
</tr>
<tr>
<td bordercolor="#D 5CCBB" bgcolor="#FFFF0 0" class="bigbluet ext"><p><span class="previewD iv" 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="tru e" loop="false" /> </embed>
</span></p> </td>
<td bordercolor="#D 5CCBB" bgcolor="#FFFF0 0"><label><d iv>
<input type="text" name="1" size="8" onBlur="check() " />
</label></td>
<td bgcolor="#FF000 0">
<img src="../images/generalimages/star.gif" alt="Correct" width="48" height="44" id="showpicture 1" style="visibili ty:hidden;" /><img src="../images/generalimages/blackx.gif" alt="Wrong" width="48" height="44" id="showwrong1 " style="visibili ty: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]

firefox vs ie

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.getEle mentsByTagName( '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:
[CODE=javascript]var inputs = document.getEle mentsByTagName( "input");
for (i = 0; i < inputs.length; i++) {
// inputs[0] would be the first input text box...
}[/CODE]

[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:
[CODE=javascript]if(document.myf orm.inputs[i].value.toLowerC ase()==answer[i]){[/CODE]
I don't see a form element named "inputs".

[windsorben]

error

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!

[CODE=javascript]var score = 0;
var answer = new Array("pass","b rag","drag","be gan","else","he ld","felt","kep t","smell");
var inputs = document.getEle mentsByTagName( 'input');

function check(){
for (i = 0; i < inputs.length; i++) {
// inputs[0] would be the first input text box...
if(inputs[i].value.toLowerC ase()==answer[i]){

score++;
var p=i+1;

var str="showpictur e"+p;
var str2="showwrong "+p;
var score2=score/9*100
var percentage=scor e2.toFixed(0) + '%';
document.getEle mentById(str).s tyle.visibility ="visible";
document.getEle mentById(str2). style.visibilit y="hidden";
document.myform .score.value=sc ore;
document.myform .percentage.val ue=percentage;
document.myform .time.value=get LessonTime();
document.myform .time.value=get LessonTime();

}

else

{

if(inputs[i].value!=""){

inputs[i].value="Try Again";

var p=i+1;

var str="showpictur e"+p;
var str2="showwrong "+p;

document.getEle mentById(str).s tyle.visibility ="hidden";
document.getEle mentById(str2). style.visibilit y="visible";
}}}

score = 0;

}

function validateForm(my form) {

if (myform.score.v alue < 8) {
alert("You must get at least 8 problems correct. Keep trying!");
return false;
}
}

[/CODE][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="<cfoutpu t>#DateFormat(N ow(), "MM/DD/YY")# At #TimeFormat(Now (),"hh:mm tt")#</cfoutput>" size="32">
<input type="hidden" name="studentid " value="<cfoutpu t>#Session.MM_U sername#</cfoutput>">
<input type="hidden" name="MM_Insert Record" value="form1">
<input name="pointposs ible" type="hidden" value="9">
<input type="hidden" name="percentag e" id="percentage " value=""/>
<input type="hidden" name="activityi d" value="2019">
</div>
</form>[/HTML]

You could use document.getEle mentsByTagName( '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:
[CODE=javascript]var inputs = document.getEle mentsByTagName( "input");
for (i = 0; i < inputs.length; i++) {
// inputs[0] would be the first input text box...
}[/CODE]

[windsorben]

clarify

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

[CODE=javascript]}
var score = 0;
var answer = new Array("pass","b rag","drag","be gan","else","he ld","felt","kep t","smell");
var inputs = document.getEle mentsByTagName( 'input');

function check(){
for (i = 0; i < inputs.text.len gth; i++) {
// inputs[0] would be the first input text box...
if(inputs[i].text.value.toL owerCase()==ans wer[i]){

score++;
var p=i+1;

var str="showpictur e"+p;
var str2="showwrong "+p;
var score2=score/9*100
var percentage=scor e2.toFixed(0) + '%';
document.getEle mentById(str).s tyle.visibility ="visible";
document.getEle mentById(str2). style.visibilit y="hidden";
document.myform .score.value=sc ore;
document.myform .percentage.val ue=percentage;
document.myform .time.value=get LessonTime();
document.myform .time.value=get LessonTime();

}

else

{

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

inputs[i].text.value="Tr y Again";
[/CODE]

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:
[CODE=javascript]if (inputs[i].type == "text") { ...[/CODE]

[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:
[CODE=javascript]if (inputs[i].type == "text") { ...[/CODE]

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