help with 'if' statement

[GoldDog]

Newbie question:

I have a select menu which sends a call back to a function to display an image. If the user makes a selection, then sets the menu back to the default position, I want to evaluate that condition in an 'if' statement in the function. The value for the default position is 'none'. How can I evaluate this value?

My function currently looks like this:

function doThis(build) {
eval("document['menu'].src = " + eval("build.options[build.selectedIndex].value") + ".src");
}

I tried this, but honestly I don't know what I'm doing:

var currChoice = ''
function doThis(build) {
eval("document['menu'].src = " + eval("build.options[build.selectedIndex].value") + ".src");
currChoice = build
if (['menu'] == 'none') {
document.getElementById('info').style.display = 'none';
}
}

What am I doing wrong?

thanks

[Jona]

document['menu'].src = eval("build.options[build.options.selectedIndex].value" + ".src");

[GoldDog]

I'm not sure what to do with this. My function works fine as it is without the conditional I tried to add. The conditional is not throwing an error; it isn't doing anything.

The purpose of my conditional is to hide a <div ID> element. How do I detect the value of 'none' that the menu is sending to the function?

[Jona]

Try using, "alert(document['menu']);" and see what the result is. I'm not sure if it's an image object or form element. lol

[GoldDog]

Ok, here's the whole thing (more or less):

<script language=Javascript>
<!--
var vm = new Image();
var none = new Image();
vm.src = "layout/Mahogany.jpg";
none.src = "layout/blank.gif";

function doInfo() {
document.getElementById('info').style.display = '';
}

function doWood(build) {
eval("document['wood'].src = " + eval("build.options[build.selectedIndex].value") + ".src");
}
-->
</script>

<form>
<select name="wood" onChange="doWood(this),doInfo()">
<option value="none" selected> Select one...
<option value="vm"> Victorian Mahogany
</select>

<div id="info" style="display: none">Contact info...</div>
</form>

So you can see that what a wood selection is doing, besides displaying an image, is showing the 'Contact Ino...'

What I want to do is hide the 'Contact Info...' if the user, ,after making a wood choice, goes back and sets the menu to 'Select one...'

Make sense?

[Jona]

<script language=Javascript>
<!--
var vm = new Image();
var none = new Image();
vm.src = "layout/Mahogany.jpg";
none.src = "layout/blank.gif";

function doInfo() {
if(document.forms[0]['wood'].options[document.forms[0].wood.options.selectedIndex].value == "none"){
document.getElementById('info').style.visibility = 'hidden';
} else {
document.getElementById('info').style.visibility = 'visible';
} }

function doWood(build) {
eval("document.forms[0]['wood'].src = " + eval("build.options[build.selectedIndex].value") + ".src");
}
-->
</script>

<form>
<select name="wood" onChange="doWood(this),doInfo()">
<option value="none" selected> Select one...
<option value="vm"> Victorian Mahogany
</select>

<div id="info" style="visibility:hidden">Contact info...</div>
</form>

[GoldDog]

object expected...

[Jona]

What browser are you using? Netscape? Try using document.forms[0].wood instead of document.forms[0]['wood']

[GoldDog]

nope. IE 6

same error

[Jona]

Strange... It works for me. Try this script I made: http://geocities.com/god_loves_07/the_switchbox.html

EDIT: Stupid host. OK, if the above link doesn't work change .html to .htm.

[GoldDog]

um, what am I supposed to be looking at? I got sent to linksponsor.com and a popup for the "System Performance Wizard".

[Jona]

I edited my post about 2 hours ago, but I don't know if you saw the edit. So I posted again just to make sure you got it. ;)

[GoldDog]

thanks. I had to go out fora little, but now I'm working on it again. There was nothing wrong with your script - it works great! The problem was I had another incomplete function I was working on and forgot to remove it when I was testing what you wrote.

I'm working on some validation functions now and plan to have this form more or less finished tonight. I will post the url here for interested parties.

thanks for all the help -Carter

[Jona]

You're welcome. ;)

[GoldDog]

Quick question...

When the user clicks the submit button, I am running this function:

function checkEmail() {
missinginfo = "";
if (document.build.Email.value == "" ||
(document.build.Email.value.indexOf('@') == -1) ||
(document.build.Email.value.indexOf('.') == -1)) {
missinginfo ="You failed to correctly fill in your Email Address.";
document.build.Email.focus();
alert(missinginfo);
return false;
}
else return true;
}

It is not, however, stopping the form from being submitted. Am I missing something basic?

[Jona]

Steal my code at: http://sonoracabinets.com/contact.html

:D

[GoldDog]

Ok, here's what I've got so far:

http://whbars.com/demo2/DesignYourBar.cfm?budget=5-10

Go ahead and advance to the second page. Nothing is being committed to the database, and submitting the form on the second page will not generate email or anything. It's completely safe to play with.

Notice on page 2 that a 'Estimated base cost' is displayed. Now what I have to do is build a calculator. When cabinetry choices are made the estimated cost variable needs to be manipulated. Likewise for the wood choices.

The 'estimated price' is wrapped in a <div id="price"> tag.

I've never done math in js before, so I'm at a loss. thanks

[Jona]

Math in JS, and you've never done it? Really? Hmmm... I would've figured the opposite. Anyways, it's really simple. You just have....


var num = 120;

function addToVar(){
alert(num);
num = num + parseInt(document.formName.InputName.value);
//you can also use this instead:
//num+=parseInt(document.formName.inputName.value);
}

[GoldDog]

Well, I've been doing it all in Cold Fusion for years, and using little bits of js to get by every once in a while.

Ok, so, how about if I want to send a number to this function like this addToVar(1234) instead of from a form? Can I do that? And how then do I write it back to the form?

[Jona]

var num = 0;

function addNum(more){
num+=more;
alert(num);
}


Calling the function can be done in many different ways. Two of which are:


<input type="text" name="val"><br>
<input type="button" value="Add" onClick="addNum(parseInt(this.form.val.value));">



<a href="default.htm" onClick="addNum(3);">Add 3</a><br>
<a href="default.htm" onClick="addNum(12);">Add 12</a>

[GoldDog]

Ok, now for a really stupid question...

how do I write that value back to my object?

I thought
document.baseprice.write(num)
would do it, but of course I was wrong.

<div id="baseprice">1234</div>

[Jona]

You would use document.getElementById("theIDofTheDiv").innerHTML = num;

[GoldDog]

Great. Works like a charm. Only problem is, how do I make sure that each time the function is called, it starts with that base price (num) that I assigned it?

I realize what's happening (I AM learning)...

var num = 10

only intializes the variable, but once it exists, the function thinks I'm working with the computed number from there on.

I start with a base price, and provide the user options. Each option has a different price associated with it, that needs to be added to that original number. Instead each option is adding to the newly computed price. Make sense?

[Jona]

I set it up to be global not local, so it would do that. To make it maintain its original value every time, put the part that says var num = 0; inside of the function.

[GoldDog]

Ok, I figured that out just before I read your response.

Final question, I promise...

My next price computation is the result of a choice made from a dropdown menu. The option values are not numbers, but letter codes. I need to read that code in the function and assign a number to it, which I will then run through the addNum() function.

<select onchange="send(this)">
<option value="agm">
<option value="csm">...

So I need to call the addNum function from within another function which assigned the number based ont he letter code. How would I do this?

[Jona]

OK, this will take some work, but I think this will make sense to you..


<html><head><title></title>
<script type="text/javascript">
<!--
var letters = new Array("a","b","c","d","e","f"); // add all of them if you want
var numbers = new Array("1","2","3","4","5","6"); //add up to 16

function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
alert(sel);
//afe = 165, aeb = 152, cda = 341
}
// -->
</script></head><body>
<form action="" name="f"><div>
<select name="sel" onChange="let2num(this.options[this.selectedIndex].value);">
<option value="-1">Choose one</option>
<option value="afe">Afe</option>
<option value="aeb">Aeb</option>
<option value="cda">Cda</option>
</select>
</div></form>
</body></html>

[GoldDog]

Sort of...

No matter what I do, the letters keep popping up in the alert. I tried switching
sel = sel.split(letters[i]).join(numbers[i]);
to
sel = sel.split(numbers[i]).join(letters[i]);
thinking I was getting sly, but that didn't work either.

[Jona]

My code works in Internet Explorer version 6.

[GoldDog]

I must be missing something...

var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
var numbers = new Array("1","2","3","0","0","4","5","6","0","7","0","8");
function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[i]).join(numbers[i]);
}
alert(sel);
}

[Jona]

Hehe... That should be letters[l] and numbers[l] not letters[i] and numbers[i]. :D

[GoldDog]

But lest you get bored, how do I now assign my new value to the addnum function?

In place of alert(sel) I want to call up the addNum() function, and add this new value to my computed price in <div id="price">.

[Jona]

Replace this line:


alert(sel);


With this one:


if(document.getElementById) document.getElementById("price").innerHTML = sel;

[GoldDog]

But I need to add the value, not replace it. Currently, this replaces the value indicated in <div id="price"> with the 'sel' value, but I want to add the 'sel' value to the price.

[Jona]

if(document.getElementById) document.getElementById("price").innerHTML += sel;

[GoldDog]

That appends it. Where price was $7775, 'sel' is appended to make it now $7775225

[pyro]

Replace document.getElementById("price").innerHTML with Number(document.getElementById("price").innerHTML)

[GoldDog]

Cannot assign to a function result

[Jona]

document.getElementById("price").innerHTML += parseInt(sel);
//use parseFloat instead of parseInt if you want to include decimals

[pyro]

Oh, Geez... my bad. Didn't even look at that... :rolleyes:

[GoldDog]

Still keeps appending the value. Man, if the customer changes their mind a lot, they end up with a number that is like 50 digits long!

[Jona]

<html><head><title></title>
<script type="text/javascript">
<!--
var letters = new Array("a","b","c","d","e","f");
var numbers = new Array("1","2","3","4","5","6");
var full=0;
function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full+=parseInt(sel);
document.getElementById("price").innerHTML="$"+full;
}
// -->
</script></head><body>
<form action="" name="f"><div>
<select name="sel" onChange="let2num(this.options[this.selectedIndex].value);">
<option value="-1">Choose one</option>
<option value="afe">Afe</option>
<option value="aeb">Aeb</option>
<option value="cda">Cda</option>
</select>
</div></form><br>
<div id="price"></div>
</body></html>

[GoldDog]

Still replacing the price (<span id="base">), but upon second change, adds it instead. And keeps on adding it...

<script>
<!--
var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
<cfoutput>
var markup = #Cabcost.markup#;
</cfoutput>
var numbers = new Array(markup,markup,markup,"0","0",markup,markup,markup,"0",markup,"0",markup);
var full=0;
function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full+=parseInt(sel);
document.getElementById("base").innerHTML="$"+full;
}
-->
</script>

<form name="build" id="build">
<select name="wood" onChange="let2num(this.options[this.selectedIndex].value);">
<option value="none" selected> Select one...
<option value="cc"> Cherry - Chesapeake
<option value="lc"> Cherry - Liberty
<option value="nc"> Cherry - Natural
<option value="nec"> Cherry - New England
<option value="agm"> Mahogany - Amazon Gold
<option value="csm"> Mahogany - Caribbean
<option value="nm"> Mahogany - Natural
<option value="vm"> Mahogany - Victorian
<option value="uao"> Oak - Antique
<option value="cgo"> Oak - Classic
<option value="eo"> Oak - English
<option value="no"> Oak - Natural
</select>
</form>

Estimated cost: <span id="base"><cfoutput>$#cost.baseprice#</cfoutput></span>.00

[Jona]

I would use a DIV instead of a SPAN. Other than that, I think your CF code might be causing the problem.

[GoldDog]

I'm using it in a similar fashion in the original addNum() function you helped me with, and it works great.

And what's the difference between div and span?

[Jona]

DIV: http://www.w3.org/TR/html401/struct/global.html#edef-DIV

SPAN: http://www.w3.org/TR/html401/struct/global.html#edef-SPAN

Mostly the fact that DIV is a block-level element and SPAN is not. (I think I said that right, but I might have my wording wrong. lol)

[GoldDog]

Ok, I tried removing the CF code from that function and hard-coding the numbers, and I'm still having the same problem.

[Jona]

Post the code without the CF.

[GoldDog]

<script>
<!--
var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
var numbers = new Array("250","250","250","0","0","250","250","250","0","250","0","250");
var full=0;
function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full+=parseInt(sel);
document.getElementById("base").innerHTML="$"+full;
}
-->
</script>

<form name="build" id="build">
<select name="wood" onChange="let2num(this.options[this.selectedIndex].value);">
<option value="none" selected> Select one...
<option value="cc"> Cherry - Chesapeake
<option value="lc"> Cherry - Liberty
<option value="nc"> Cherry - Natural
<option value="nec"> Cherry - New England
<option value="agm"> Mahogany - Amazon Gold
<option value="csm"> Mahogany - Caribbean
<option value="nm"> Mahogany - Natural
<option value="vm"> Mahogany - Victorian
<option value="uao"> Oak - Antique
<option value="cgo"> Oak - Classic
<option value="eo"> Oak - English
<option value="no"> Oak - Natural
</select>
</form>

Estimated cost: $<span id="base">3456</span>.00

[Jona]

<script>
<!--
var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
var numbers = new Array("250","250","250","0","0","250","250","250","0","250","0","250");
var full=0;
function let2num(sel){
full=parseInt(document.getElementById("base").innerHTML);
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full+=parseInt(sel);
document.getElementById("base").innerHTML=full;
}
-->
</script>

<form name="build" id="build">
<select name="wood" onChange="let2num(this.options[this.selectedIndex].value);">
<option value="none" selected> Select one...
<option value="cc"> Cherry - Chesapeake
<option value="lc"> Cherry - Liberty
<option value="nc"> Cherry - Natural
<option value="nec"> Cherry - New England
<option value="agm"> Mahogany - Amazon Gold
<option value="csm"> Mahogany - Caribbean
<option value="nm"> Mahogany - Natural
<option value="vm"> Mahogany - Victorian
<option value="uao"> Oak - Antique
<option value="cgo"> Oak - Classic
<option value="eo"> Oak - English
<option value="no"> Oak - Natural
</select>
</form>

Estimated cost: $<span id="base">3456</span>.00

[GoldDog]

Better. It's no longer appending the value, but adding it from the start as it should. However, it's incrementing the value progressively upward. Same problem as when I had the 'num' variable outside the addNum() function call.

I want each successive calculation (wood choice) to operate on the base price, not the newly calculated one.

In other words, each choice should add 250 to the base of 3456, instead of adding 250 to 250 to 3456... Am I explaining myself properly?

[Jona]

<script>
<!--
var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
var numbers = new Array("250","250","250","0","0","250","250","250","0","250","0","250");
var full=0;
function let2num(sel){
stayFull = document.getElementById("base").innerHTML;
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full=parseInt(stayFull + sel);
document.getElementById("base").innerHTML=full;
}
-->
</script>

[GoldDog]

Nope. That's appending it again...

6025325325325325325325325

[Jona]

OK just use CFOUTPUT tags to specify the value of the SPAN tag:


<script>
<!--
var letters = new Array("agm","csm","cc","cgo","eo","lc","nc","nm","no","nec","uao","vm");
var numbers = new Array("250","250","250","0","0","250","250","250","0","250","0","250");
var full=0;
function let2num(sel){
for(var l=0; l<letters.length; l++){
sel = sel.split(letters[l]).join(numbers[l]);
}
full=parseInt(sel + <cfoutput>##</cfoutput>);
document.getElementById("base").innerHTML=full;
}
-->
</script>