OnChange Variables, making and using them.

[Fou-Lu]

Hi, I need a little help with some onChange variables. How do I get the variables to write in number form? As in, I have a block of code here:

<SELECT id=mark name=markup STYLE=width:100 onchange=marking()>
<option value="none" SELECTED price="0">None</option>
<option value="b" price="150">Bold</option>
<option value="i" price="150">Italic</option>
<option value="b><i" price="250">Bold & Italic</option>


That I am using to customize text. The function marking() works fine for changing the text to bold, italic or both, but I cannot get the price to change correctly. Instead of showing 150, it shows + myform.mark.price +.
I also have this in the head section to define the variables.

var bold = "' + myform.mark.price + '"
var color = "' + myform.clr.price + '"
var glowprice = "' + myform.glow.price + '"
.......
.......
price.innerHTML = "bold+color+glowprice";



The code does work, just not how I want it too. I can get the price.innerHTML to change to "bold+color+glowprice", or "myform.mark.price+myform.clr.price+myform.glow.price", but I would like the numerical values for the variables, not the myform.mark.price, or bold or whatever. The biggest thing here is, the var bold, var color, and var glowprice are not defining numbers, and the price.innerHTML is not parsing correctly. I am fairly new to javascript, and any help would be greatly appreciated!

[joh6nn]

you program in perl, huh.

var bold = myform.mark.price;

you don't need the quotes at all in this case. you only need quotes when you're working with actual text.

[Fou-Lu]

Actually no, perl and I are not the best of friends. I use php for my sites.

So if I just change the
var bold = "' + myform.mark.price +"'
to
var
bold = myform.mark.price

var bold will = 150 or 250?
Cool. K, and with the allprice variable, the numbers will add up to like 2500, as opposed to saying 250+250+2000? Do I need quotation marks around the var allprice?

Also, it didn't work. It changes to "undifined". Any other ideas?

[joh6nn]

sorry missed a few things.

var bold = document.myform.mark.price + '"
var color = document.myform.clr.price + '"
var glowprice = document.myform.glow.price + '"
.......
.......
price.innerHTML = bold+color+glowprice;

that should take care of it for you.

what's allprice? i don't see it anywhere in the code. did i miss something?

[Fou-Lu]

Hmm, don't worry about the allprice. This way is better. However, the code you gave me still doesn't work. Javascript isn't really my friend. It just gave me a "Object expected error"
The closest that I have gotten, is by using the var bold = document.myform.mark.price
But that just gives me a NaN value for the onChange. Please help!
If it helps, I can give you the url to view it.
Its: www.gamers-forums.com/vb/shop.php?s=&action=misc&type=customtitle
You will have to log in. You can use "Tester" password "none"
Please let me know if there is anything that you can do!

[joh6nn]

search for this line, and delete it
file://-->

it's causing errors for you.

also, look at the following:

var bold = document.myform.mark.price
var color = document.myform.clr.price
var glowprice = document.myform.glow.price

chng.innerHTML = '<span style="position:relative; width:200; filter:' + myform.glow.value + '(color=' + myform.glowclr.value + ')"><font color=' + myform.clr.value + '><' + myform.mark.value + '>Tester</' + myform.mark.value + '></font></span>'

you still need to add the dodument.object to the front of all those. even simpler, though, would be to do this:

var bold = document.myform.mark
var color = document.myform.clr
var glowclr = document.myform.glowclr
var glow = document.myform.glow

chng.innerHTML = '<span style="position:relative; width:200; filter:' + glow.value + '(color=' + glowclr.value + ')"><font color=' + clr.value + '><' + bold.value + '>Tester</' + bold.value + '></font></span>'

now you can refer to bold.price, or bold.color, without having to bother with the whole long bit of document.myform.mark.price or document.myform.mark.value every time.

that should help, i think.

[Fou-Lu]

Ok, I changed the code so that it doesn't have that file://--> thing in it. However, the onChange for the price still gives me NaN.
This is what I have for it:

function marking(){

var bold = document.myform.mark
var color = document.myform.clr
var glowclr = document.myform.glowclr
var glow = document.myform.glow
chng.innerHTML = '<span style="position:relative; width:200; filter:' + glow.value + '(color=' + glowclr.value + ')"><font color=' + color.value + '><' + bold.value + '>$bbuserinfo[usertitle]</' + bold.value + '></font></span>'
price.innerHTML =bold.price+color.price+glow.price
}

Obviously it is in the price.innerHTML part. Not changing it to appropriate numbers. Otherwise it works fine, just that little bit...

[joh6nn]

sorry, i haven't been thinking clearly at all. if i had been paying closer attention, i would have been able to clear this up for you lots faster.

first, you can't just add your own attributes to things like that. you can do it using javascript, but you can't do it in the html.

secondly, select boxes have a special way of finding out which of their options have been selected. the following ought to work.

<SCRIPT ID=clientEventHandlersJS LANGUAGE=javascript>

<!--

function marking(){
var markup = document.myform.markup
var color = document.myform.selclr
var glowclr = document.myform.selglowclr
var glow = document.myform.selglow

var markPrice = [0,150,150,250];
var mark = [["",""],["<b>","</b>"],["<i>","</i>"],["<b><i>","</b></i>"]];
var colorPrice = 0, glowPrice = 0;
if (color.selectedIndex > 0) { colorPrice = 2000; }
if (glow.selectedIndex > 0) { glowPrice = 5000; }

chng.innerHTML = '<span style="position:relative; width:200; color: ' + color.options[color.selectedIndex].value + '; filter: ' + glow.options[glow.selectedIndex].value + '(color=' + glowclr.options[glowclr.selectedIndex].value + ')">' + mark[markup.selectedIndex][0] + 'Tester' + mark[markup.selectedIndex][1] + '</span>'
price.innerHTML = markPrice[markup.selectedIndex].value + colorPrice + glowPrice;
}

//-->
</SCRIPT>

<SELECT id="mark" name="markup" STYLE="width:100;" onchange="marking();">
<option value="none" SELECTED>None</option>
<option value="bold">Bold</option>
<option value="italic">Italic</option>
<option value="both">Bold & Italic</option>
</select><font face="verdana,arial,helvetica" size="1" >&nbsp;Mark-up</font>
<br>
<SELECT id="clr" name="selclr" STYLE="width:100;" onchange="marking();">
<option value="#000000" SELECTED>None</option>
<option value="#000000">Black</option>
<option value="#FFFFFF">White</option>
<option value="#87CEEB">Sky Blue</option>
<option value="#4169E1">Royal Blue</option>
<option value="#0000FF">Blue</option>
<option value="#00008B">Dark Blue</option>
<option value="#FFA500">Orange</option>
<option value="#FF4500">Orange Red</option>
<option value="#DC143C">Crimson</option>
<option value="#FF0000">Red</option>
<option value="#B22222">Firebrick</option>
<option value="#8B0000">Dark Red</option>
<option value="#008000">Green</option>
<option value="#32CD32">Limegreen</option>
<option value="#2E8B57">Sea-green</option>
<option value="#D87093">Deeppink</option>
<option value="#FF6347">Tomato</option>
<option value="#FF7F50">Coral</option>
<option value="#800080">Purple</option>
<option value="#4B0082">Indigo</option>
<option value="#DEB887">Burlywood</option>
<option value="#F4A460">Sandy Brown</option>
<option value="#A0522D">Sienna</option>
<option value="#D2691E">Chocolate</option>
<option value="#008080">Teal</option>
<option value="#FFD700">Gold</option>
<option value="#C0C0C0">Silver</option>
</select><font face="verdana,arial,helvetica" size="1" >&nbsp;Font Color</font>
<br>
<SELECT id="glow" name="selglow" STYLE="width:100;" onchange="marking();">
<option value="none">None</option>
<option value="glow">Glow</option>
<option value="shadow">Shadow</option>
</select><font face="verdana,arial,helvetica" size="1" >&nbsp;Filters</font>
<br>
<SELECT id="glowclr" name="selglowclr;" STYLE="width:100;" onchange="marking();">
<option value="#000000" SELECTED>Black</option>
<option value="#FFFFFF">White</option>
<option value="#87CEEB">Sky Blue</option>
<option value="#4169E1">Royal Blue</option>
<option value="#0000FF">Blue</option>
<option value="#00008B">Dark Blue</option>
<option value="#FFA500">Orange</option>
<option value="#FF4500">Orange Red</option>
<option value="#DC143C">Crimson</option>
<option value="#FF0000">Red</option>
<option value="#B22222">Firebrick</option>
<option value="#8B0000">Dark Red</option>
<option value="#008000">Green</option>
<option value="#32CD32">Limegreen</option>
<option value="#2E8B57">Sea-green</option>
<option value="#D87093">Deeppink</option>
<option value="#FF6347">Tomato</option>
<option value="#FF7F50">Coral</option>
<option value="#800080">Purple</option>
<option value="#4B0082">Indigo</option>
<option value="#DEB887">Burlywood</option>
<option value="#F4A460">Sandy Brown</option>
<option value="#A0522D">Sienna</option>
<option value="#D2691E">Chocolate</option>
<option value="#008080">Teal</option>
<option value="#FFD700">Gold</option>
<option value="#C0C0C0">Silver</option></select><font face="verdana,arial,helvetica" size="1" >&nbsp;Filter Color</font>

[Fou-Lu]

Yay! Hopefully that will work! I will give it a shot when I get home!