/    Sign up×
Community /Pin to ProfileBookmark

having a few minor issues with a LONGG piece of code..

I’ve got a long piece of code im working with… however, I can’t paste the whole thing because it’s FARR too long… so you cant see the site in full functionality, but, can review the problem code in question…

PROBLEM #1:
I have four functions that change my titles when selections are made in my option fields. Three of the four work. changeSizeTitle(); changePrintTitle(); and changeColorTitle();… For some reason my function changeFrameTitle(); is returning “undefined” instead of the proper titles. I’ve compared the code for this function with the other three that are functioning properly, and I can’t see any difference. I’m stumped as to why this function is returning a value of “undefined”… Any ideas… advice appreciated.

Thanks to everyone in advance for taking the time to read this post and/or possibly helping me out with some ideas…

-John

———Javascript Portion———–

[CODE]
var frameFirst = new Array(
”,
”,
‘Economy Series’,
‘Classic Series’,
‘Oak Series’,
‘Architect Series’,
‘Homestyle Series’,
‘Corporate Series’,
‘Clean Cut Series’,
‘Rustic II Series’);

var frameSecond = new Array(
‘Economy Series’,
‘Classic Series’,
‘Oak Series’,
‘Architect Series’,
‘Homestyle Series’,
‘Corporate Series’,
‘Clean Cut Series’,
‘Rustic II Series’);

function changeFrameTitle(elemid){

if(document.drop_list.Frame.value == ‘NaN’)
{
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById(“frameTitle”).innerHTML=frameFirst[ind];
document.getElementById(“profileTitle”).innerHTML=frameFirst[ind];
}

else
{
var ind = document.getElementById(elemid).selectedIndex;
document.getElementById(“frameTitle”).innerHTML=frameSecond[ind];
document.getElementById(“profileTitle”).innerHTML=frameFirst[ind];
}
}
[/CODE]

———HTML Portion—————-

[CODE]
<div class=”size” name=”sizetitle” id=”sizeTitle”>&nbsp;
</div>
<div class=”print” name=”printtitle” id=”printTitle”>&nbsp;
</div>
<div class=”economy” name=”frametitle” id=”frameTitle”>&nbsp;
</div>
<div class=”honey” name=”colortitle” id=”colorTitle”>&nbsp;
</div>

<td>
<SELECT id=”Frame” NAME=”Frame” onChange=”changeFrame();changeFrameTitle(‘Frame’);ReadForm(this.form);” style=”width:260″>
<Option selected value=”NaN”>——————-</option>
<Option value=”NaN”>Please Select a Size First</option>
</SELECT>
</tr>
</td>
[/CODE]

to post a comment
JavaScript

11 Comments(s)

Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — PROBLEM #2:

This one seems a little more complex, but maybe its actually very simple.. Anyway, what I'm trying to achieve, is, for example, lets say a size of 24"x30" is chosen, and then a Textured Print is chosen... This would result in a $40 additional charge... Now, lets say the customer goes and changes his size to 8"x10"... the charge is only an additional $20 for a Textured Print.. I could have the print field cleared and reset when the size field is changed... But, I think that could get annoying to some customers... Everytime they want to change a size to see what it would look like, they'd have to go back and reselect the textured print at the right price... My question is this: Is it possible to just swap out the value of an option field, but still keep it as the selected option? You can see the code in the function selectPrint(); . I have functions that remove or add options to a field.. Is is possible to alter those scripts a little bit to just swap out an option instead of clear or add them? ... Anyway, any help with this issue as well would be greatly appreciated.

I've taken out some choices in sizes... they're all the same, just some minor numbers changed.. you get the idea.. My code is too long to post on the forum..

------------Javascript------------
[CODE]

function changeSize(){

if(document.drop_list.Size.value == '8x10 @50.00')
{
if(document.drop_list.Size.options.length == '13')
{
removeSelect(document.drop_list.Size);

removeAllOptions(document.drop_list.Print);
addOption(document.drop_list.Print,"NaN", "Select Picture Type:");
addOption(document.drop_list.Print,"NaN", "----------------");
addOption(document.drop_list.Print,"print", "Limited Edition Print (Included in Price)");
addOption(document.drop_list.Print,"textured +20.00", "Textured Print (Add $20.00)");
addOption(document.drop_list.Print,"painting +50.00", "Hand-Painted Picture (Add $50.00)");

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame,"NaN", "----------------");
addOption(document.drop_list.Frame,"NaN", "Please Select a Picture Type First");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Picture Type First");

document.main.src = "../pics/8001.jpg"
}
document.main.setAttribute('className', 'position8x10');
document.frame.setAttribute('className', 'position8x10');
document.main.width = "80";
document.main.height = "60";
document.frame.width = "80";
document.frame.height = "60";
}

if(document.drop_list.Size.value == '12x16 @95.00')
{
if(document.drop_list.Size.options.length == '13')
{
removeSelect(document.drop_list.Size);

removeAllOptions(document.drop_list.Print);
addOption(document.drop_list.Print,"NaN", "Select Picture Type:");
addOption(document.drop_list.Print,"NaN", "----------------");
addOption(document.drop_list.Print,"print", "Limited Edition Print (Included in Price)");
addOption(document.drop_list.Print,"textured +30.00", "Textured Print (Add $30.00)");
addOption(document.drop_list.Print,"painting +75.00", "Hand-Painted Picture (Add $75.00)");

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame,"NaN", "----------------");
addOption(document.drop_list.Frame,"NaN", "Please Select a Picture Type First");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Picture Type First");

document.main.src = "../pics/8001.jpg"
}
document.main.setAttribute('className', 'position12x16');
document.frame.setAttribute('className', 'position12x16');
document.main.width = "128";
document.main.height = "90";
document.frame.width = "128";
document.frame.height = "90";
}

if(document.drop_list.Size.value == '24x30 @200.00')
{
if(document.drop_list.Size.options.length == '13')
{
removeSelect(document.drop_list.Size);

removeAllOptions(document.drop_list.Print);
addOption(document.drop_list.Print,"NaN", "Select Picture Type:");
addOption(document.drop_list.Print,"NaN", "----------------");
addOption(document.drop_list.Print,"print", "Limited Edition Print (Included in Price)");
addOption(document.drop_list.Print,"textured +40.00", "Textured Print (Add $40.00)");
addOption(document.drop_list.Print,"painting +100.00", "Hand-Painted Picture (Add $100.00)");

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame,"NaN", "----------------");
addOption(document.drop_list.Frame,"NaN", "Please Select a Picture Type First");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Picture Type First");

document.main.src = "../pics/8001.jpg"
}
document.main.setAttribute('className', 'position24x30');
document.frame.setAttribute('className', 'position24x30');
document.main.width = "240";
document.main.height = "180";
document.frame.width = "240";
document.frame.height = "180";
}
}

function changePrint(){

if(document.drop_list.Print.value == 'print')
{
if(document.drop_list.Print.options.length == '5')
{
removeSelect(document.drop_list.Print);

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
addOption(document.drop_list.Frame, "NaN", "----------------");
addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
}
document.main.src = "../pics/8001.jpg"
}


if(document.drop_list.Print.value == 'textured +20.00' || document.drop_list.Print.value == 'textured +30.00' || document.drop_list.Print.value == 'textured +40.00')
{
if(document.drop_list.Print.options.length == '5')
{
removeSelect(document.drop_list.Print);

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
addOption(document.drop_list.Frame, "NaN", "----------------");
addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
}
document.main.src = "../pics/8001t.jpg"
}


if(document.drop_list.Print.value == 'painting +50.00' || document.drop_list.Print.value == 'painting +75.00' || document.drop_list.Print.value == 'painting +100.00')
{
if(document.drop_list.Print.options.length == '5')
{
removeSelect(document.drop_list.Print);

removeAllOptions(document.drop_list.Frame);
addOption(document.drop_list.Frame, "NaN", "Select Frame Style:");
addOption(document.drop_list.Frame, "NaN", "----------------");
addOption(document.drop_list.Frame,"economy", "Economy Series (Included in Price)");
addOption(document.drop_list.Frame,"classic +5.00", "Classic Series (Add $5.00)");
addOption(document.drop_list.Frame,"oak +5.00", "Oak Series (Add $5.00)");
addOption(document.drop_list.Frame,"architect +5.00", "Architect Series (Add $5.00)");
addOption(document.drop_list.Frame,"homestyle +10.00", "Homestyle Series (Add $10.00)");
addOption(document.drop_list.Frame,"corporate +10.00", "Corporate Series (Add $10.00)");
addOption(document.drop_list.Frame,"clean cut +10.00", "Clean Cut Series (Add $10.00)");
addOption(document.drop_list.Frame,"rustic II +20.00", "Rustic II Series (Add $20.00)");

removeAllOptions(document.drop_list.Color);
addOption(document.drop_list.Color,"NaN", "----------------");
addOption(document.drop_list.Color,"NaN", "Please Select a Frame First");
}
document.main.src = "../pics/8001p.jpg"
}
}
[/CODE]


------------------HTML------------

[CODE]
<td>
<SELECT id="Size" NAME="Size" onChange="changeSize();changeSizeTitle('Size');ReadForm(this.form);" style="width:260">
<Option selected value="NaN">Select Size:</option>
<Option value="NaN">-------------------</option>
</SELECT>&nbsp;
</tr>
</td>

<tr>
<td>
<b>Print:</b>
</td>

<td>
<SELECT id="Print" NAME="Print" onChange="changePrint();changePrintTitle('Print');ReadForm(this.form);" style="width:260">
<Option selected value="NaN">-------------------</option>
<Option value="NaN">Please Select a Size First</option>
</SELECT>
</tr>
</td>
[/CODE]
Copy linkTweet thisAlerts:
@FangApr 09.2008 — The first problem is because the first two values in the array are empty.

Zip a working document.
Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — The first problem is because the first two values in the array are empty.

Zip a working document.[/QUOTE]



But, the other three functions that do work as intended are designed the EXACT same way...

I'll do as you said and zip a fully functional page. That way you can look at the entire code...

That might help you get a better feel for what it is im trying to accomplish here..
Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — Kay, here's the zip of the whole page...

Run through it and get an idea of what I'm trying to do... Obviously you wont have the pictures necessary.. But everything else should function..

I can attach the pic too.. actually... all you would have to do (to line up with the code is to put the picture in one folder titled "pics" and the document in another folder as the pic src = "../pics/8001.jpg" ill also send you one of the frames... put that in a different folder as well, titled "frames" as the source for the frames = "../frames/xxxx.gif" where xxxx is the pic... Ill send you "economy honey" soo, select that frame to get an idea of what I'm trying to do..

[upl-file uuid=53f8e03b-7007-4fff-9717-56f06f026a2c size=7kB]b8001.zip[/upl-file]

[upl-file uuid=39cf5c58-eb66-4f0d-ad4a-d659eb477140 size=66kB]8001.jpg[/upl-file]

[upl-file uuid=6ebf572d-f344-4be4-8a05-49ecfb495584 size=14kB]economyhoney.gif[/upl-file]
Copy linkTweet thisAlerts:
@FangApr 09.2008 — Use this method of referencing the form elements:var ind = document.forms['drop_list'].elements[elemid].selectedIndex;
//document.getElementById(elemid).selectedIndex;

Hopefully the page validates in reality; if not the form elements may not be accessible.
Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — Thanks man...

That was a good idea... Once again, another stupid little naming convention throws me off... I figured it would have referenced the right form... It's strange that the other three functions that all do the EXACT same thing dont require that little snippet of code, but this one does...

I made some quick changes and threw that 'drop_list' in there... It works the way it should now...

Thanks for the advice..

Also, I should let you and anyone else know, that I figured out my changing option problem as well... I went in and added an if statement to check to see if the value was different.. If it was, I reloaded and pre-selected the correct changed price... This is the statement I added... It works:

[CODE]
if(document.drop_list.Print.value == 'textured +20.00' || document.drop_list.Print.value == 'textured +30.00')
{
removeAllOptions(document.drop_list.Print);
addOption(document.drop_list.Print,"print", "Limited Edition Print (Included in Price)");
addOption(document.drop_list.Print,"textured +40.00", "Textured Print (Add $40.00)");
addOption(document.drop_list.Print,"painting +100.00", "Hand-Painted Picture (Add $100.00)");

document.getElementById('Print').options[1].selected=true
}

if(document.drop_list.Print.value == 'painting +50.00' || document.drop_list.Print.value == 'painting +75.00')
{
removeAllOptions(document.drop_list.Print);
addOption(document.drop_list.Print,"print", "Limited Edition Print (Included in Price)");
addOption(document.drop_list.Print,"textured +40.00", "Textured Print (Add $40.00)");
addOption(document.drop_list.Print,"painting +100.00", "Hand-Painted Picture (Add $100.00)");

document.getElementById('Print').options[2].selected=true
}

[/CODE]


I don't know whether you care to read that code or not.. Just thought I would update and let you know that I figured out the second problem too..

Thanks for your help.
Copy linkTweet thisAlerts:
@FangApr 09.2008 — Although "Frame" is not a reserved word it could be confusing IE.

Try a different id/name
Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — yeah.. That could be the issue, I suppose... Never thought of that.. Either way, the little snippet you gave me worked just fine.. Ill just leave the name, and let that function look a smidge different than the rest... The fact that it works the way its supposed to is what is of concern to me...

Hey, while I've got you here.. I was messing around with my title's now that they work... I've got them in <div>s as you can see... I'm either dumb, or haven't messed around with it enough yet.. But, I'm trying to raise the <div> up above the picture & frame... can I use CSS to just raise the <div> without affecting the "center" align on the div? I want it to center, no matter how long or short the title ends up being... But once I use CSS to move the div, it seems to negate the centering. Consequently, I would have to create a seperate position for EACH title in order to make it "center" so to speak, on my own, using CSS....

Any ideas?
Copy linkTweet thisAlerts:
@johnd3445authorApr 09.2008 — Neverminddd.... I'm an idiot...

It might not be the most complex or original code.... But I just added a bunch of <br>'s between the sets of <div>s I wanted seperated.... Did the job.. Maybe not the "professional" way to code... But got my problem solved myself...Thanks anyways, sorry for asking such a DUMB question.
Copy linkTweet thisAlerts:
@FangApr 10.2008 — Look at margin, <br>s don't produce the same layout x-browser.
Copy linkTweet thisAlerts:
@johnd3445authorApr 10.2008 — That's a good point... I'll take a look at using margin in the <div>s

I haven't gone and messed around with the code yet, but, just so I'm clear (Im veryyy new to CSS.. never used it before)..

if I set a bottom margin, that will just move the div, UP, right? the bigger the bottom margin, the more buffering there is between the bottom of my element the div is located in and the div itself....

So, I have a table cell 400px high... And I set the margin-bottom:350,

That should not allow that div to go below 50px below the top of that cell, correct?

Anyway, I'm gonna go mess around with it and see what happens.. thanks for the advice..
×

Success!

Help @johnd3445 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...