im a total noob, but still... what am i doing wrong?

P

plemon

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13
= + $75 var v14 = + $100;
function f1()
{ if(document.form1.rb1[0].checked) var v11 = + $0; var v12 = + $25;
var v13 = + $75; var 1v4 = + $100; else
if(document.form1.rb1[1].checked) var v11 = - $25; var v12 = + $0; var
v13 = + $25; var v14 = + $50; else
if(document.form1.rb1[2].checked) var v11 = - $50; var v12 = - $25; var
v13 = + $0; var v14 = + $25; else
if(document.form1.rb1[3].checked) var v11 = - $75; var v12 = - $50; var
v13 = - $25; var v14 = + $0;}
</script>
</head>

<body>
<form name="form1">
<input type="radio" name="rb1" value="$799.97" checked
onclick="f1()">Computers<br/>
<input type="radio" name="rb1" value="$26.95"
onclick="f1()">Books<br/>

<input type="radio" name="rb1" value="$1.99"
onclick="f1()">Pencils<br/>
<input type="radio" name="rb1" value="$0.99"
onclick="f1()">Paper<br/>
<script type="text/javascript">
document.write(v11, v12, v13, v14)</script>
</body>
</html>

im trying to get in effect what you see on dell.com or alienware.com
when you change a computer componet like say instead of hard drive X
you choose hard drive Y all the prices change next to each componet i
know my document.write is in the wrong place to be exactly like the
dell ect. i was just trying to see if i could get it to work which i...
cant:(
 
P

Peter Michaux

Hi Plemon,

There are a few things causing trouble.

If you
plemon said:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13
= + $75 var v14 = + $100;
function f1()
{ if(document.form1.rb1[0].checked) var v11 = + $0; var v12 = + $25;
var v13 = + $75; var 1v4 = + $100; else
if(document.form1.rb1[1].checked) var v11 = - $25; var v12 = + $0; var
v13 = + $25; var v14 = + $50; else
if(document.form1.rb1[2].checked) var v11 = - $50; var v12 = - $25; var
v13 = + $0; var v14 = + $25; else
if(document.form1.rb1[3].checked) var v11 = - $75; var v12 = - $50; var
v13 = - $25; var v14 = + $0;}
</script>
</head>

<body>
<form name="form1">
<input type="radio" name="rb1" value="$799.97" checked
onclick="f1()">Computers<br/>
<input type="radio" name="rb1" value="$26.95"
onclick="f1()">Books<br/>

<input type="radio" name="rb1" value="$1.99"
onclick="f1()">Pencils<br/>
<input type="radio" name="rb1" value="$0.99"
onclick="f1()">Paper<br/>
<script type="text/javascript">
document.write(v11, v12, v13, v14)</script>
</body>
</html>

im trying to get in effect what you see on dell.com or alienware.com
when you change a computer componet like say instead of hard drive X
you choose hard drive Y all the prices change next to each componet i
know my document.write is in the wrong place to be exactly like the
dell ect. i was just trying to see if i could get it to work which i...
cant:(
Click to expand...

If you are going to use a doctype (which is good to do) then it is a
good idea to also validate you markup. <URL: http://validator.w3.org/>

If you want to use if-else blocks with multiple lines in each case then
you want to use braces around the mutiple lines with each case.

You can only use document.write while the page loads. After the page
loads you use different techniques to manipulate the page.

Strings need to be in either double or single quotation marks.

The following works but it isn't the prettiest.

May I suggest <URL: http://jibbering.com/faq/#FAQ3_1> to get you going
faster if you are interested in learning JavaScript.

Peter


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Untitled Document</title>

<script type="text/javascript">

function f1() {
var v11 = "+ $0";
var v12 = "+ $25";
var v13 = "+ $75";
var v14 = "+ $100";

if (document.form1.rb1[0].checked) {
v11 = "+ $0";
v12 = "+ $25";
v13 = "+ $75";
v14 = "+ $100";
} else if (document.form1.rb1[1].checked) {
v11 = "- $25";
v12 = "+ $0";
v13 = "+ $25";
v14 = "+ $50";
} else if (document.form1.rb1[2].checked) {
v11 = "- $50";
v12 = "- $25";
v13 = "+ $0";
v14 = "+ $25";
} else if (document.form1.rb1[3].checked) {
v11 = "- $75";
v12 = "- $50";
v13 = "- $25";
v14 = "+ $0";
}

document.getElementById("v11").innerHTML = v11;
document.getElementById("v12").innerHTML = v12;
document.getElementById("v13").innerHTML = v13;
document.getElementById("v14").innerHTML = v14;
}
</script>

</head>
<body>

<form name="form1" action="#">
<ul>
<li><input type="radio" name="rb1" value="$799.97"
checked="checked" onclick="f1()" />Computers</li>
<li><input type="radio" name="rb1" value="$26.95" onclick="f1()"
/>Books</li>
<li><input type="radio" name="rb1" value="$1.99" onclick="f1()"
/>Pencils</li>
<li><input type="radio" name="rb1" value="$0.99" onclick="f1()"
/>Paper</li>
</ul>
</form>

<span id="v11"></span>
<span id="v12"></span>
<span id="v13"></span>
<span id="v14"></span>

<script type="text/javascript">
f1();
</script>

</body>
</html>
 
H

Hal Rosser

plemon said:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13
= + $75 var v14 = + $100;
function f1()
{ if(document.form1.rb1[0].checked) var v11 = + $0; var v12 = + $25;
var v13 = + $75; var 1v4 = + $100; else
if(document.form1.rb1[1].checked) var v11 = - $25; var v12 = + $0; var
v13 = + $25; var v14 = + $50; else
if(document.form1.rb1[2].checked) var v11 = - $50; var v12 = - $25; var
v13 = + $0; var v14 = + $25; else
if(document.form1.rb1[3].checked) var v11 = - $75; var v12 = - $50; var
v13 = - $25; var v14 = + $0;}
</script>
</head>

<body>
<form name="form1">
<input type="radio" name="rb1" value="$799.97" checked
onclick="f1()">Computers<br/>
<input type="radio" name="rb1" value="$26.95"
onclick="f1()">Books<br/>

<input type="radio" name="rb1" value="$1.99"
onclick="f1()">Pencils<br/>
<input type="radio" name="rb1" value="$0.99"
onclick="f1()">Paper<br/>
<script type="text/javascript">
document.write(v11, v12, v13, v14)</script>
</body>
</html>

im trying to get in effect what you see on dell.com or alienware.com
when you change a computer componet like say instead of hard drive X
you choose hard drive Y all the prices change next to each componet i
know my document.write is in the wrong place to be exactly like the
dell ect. i was just trying to see if i could get it to work which i...
cant:(
Click to expand...

I would try to make it a little simpler by making 2 small changes.
1) Change function f1 to accept arguments you want to set vars to.
the function would look like this:
function f1(theButton,a,b,c,d){
if (theButton.checked){
var v11 = a;
var v12 = b;
var v13 = c;
var v14 = d;
}
}
2)Change the input tags so you pass the radio button (this) to the function
as well as the other values..
<input type="radio" name="rb1" value="799.97" checked="checked" onclick
= "f1(this,0,25,75,100)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,25,0,25,50)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,50,25,0,25)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,75,50,25,0)">

Also I would leave the dollar sign and other formatting off untill you
display it in case you want to perform any math with the values.
HTH
 
P

plemon

thank you all yeah i know my formating i just started javascript
so i dont quite no all the rules and i always forget about the
validator


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13
= + $75 var v14 = + $100;
function f1()
{ if(document.form1.rb1[0].checked) var v11 = + $0; var v12 = + $25;
var v13 = + $75; var 1v4 = + $100; else
if(document.form1.rb1[1].checked) var v11 = - $25; var v12 = + $0; var
v13 = + $25; var v14 = + $50; else
if(document.form1.rb1[2].checked) var v11 = - $50; var v12 = - $25; var
v13 = + $0; var v14 = + $25; else
if(document.form1.rb1[3].checked) var v11 = - $75; var v12 = - $50; var
v13 = - $25; var v14 = + $0;}
</script>
</head>
Click to expand...
<body>
<form name="form1">
<input type="radio" name="rb1" value="$799.97" checked
onclick="f1()">Computers<br/>
<input type="radio" name="rb1" value="$26.95"
onclick="f1()">Books<br/>
Click to expand...
<input type="radio" name="rb1" value="$1.99"
onclick="f1()">Pencils<br/>
<input type="radio" name="rb1" value="$0.99"
onclick="f1()">Paper<br/>
<script type="text/javascript">
document.write(v11, v12, v13, v14)</script>
</body>
</html>
Click to expand...
im trying to get in effect what you see on dell.com or alienware.com
when you change a computer componet like say instead of hard drive X
you choose hard drive Y all the prices change next to each componet i
know my document.write is in the wrong place to be exactly like the
dell ect. i was just trying to see if i could get it to work which i...
cant:(I would try to make it a little simpler by making 2 small changes.
Click to expand...
1) Change function f1 to accept arguments you want to set vars to.
the function would look like this:
function f1(theButton,a,b,c,d){
if (theButton.checked){
var v11 = a;
var v12 = b;
var v13 = c;
var v14 = d;
}}2)Change the input tags so you pass the radio button (this) to the function
as well as the other values..
<input type="radio" name="rb1" value="799.97" checked="checked" onclick
= "f1(this,0,25,75,100)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,25,0,25,50)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,50,25,0,25)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,75,50,25,0)">

Also I would leave the dollar sign and other formatting off untill you
display it in case you want to perform any math with the values.
HTH
Click to expand...
 
P

plemon

yeah i like the second response a lot although the first works i can
work the second one to my needs with less hassle and about adding them
up im going to change the values and add the values of the checked ones
instead of the variables or i will pass each value into a var and then
add the vars

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitled Document</title>
<script type="text/javascript">var v11 = + $0; var v12 = + $25; var v13
= + $75 var v14 = + $100;
function f1()
{ if(document.form1.rb1[0].checked) var v11 = + $0; var v12 = + $25;
var v13 = + $75; var 1v4 = + $100; else
if(document.form1.rb1[1].checked) var v11 = - $25; var v12 = + $0; var
v13 = + $25; var v14 = + $50; else
if(document.form1.rb1[2].checked) var v11 = - $50; var v12 = - $25; var
v13 = + $0; var v14 = + $25; else
if(document.form1.rb1[3].checked) var v11 = - $75; var v12 = - $50; var
v13 = - $25; var v14 = + $0;}
</script>
</head>
Click to expand...
<body>
<form name="form1">
<input type="radio" name="rb1" value="$799.97" checked
onclick="f1()">Computers<br/>
<input type="radio" name="rb1" value="$26.95"
onclick="f1()">Books<br/>
Click to expand...
<input type="radio" name="rb1" value="$1.99"
onclick="f1()">Pencils<br/>
<input type="radio" name="rb1" value="$0.99"
onclick="f1()">Paper<br/>
<script type="text/javascript">
document.write(v11, v12, v13, v14)</script>
</body>
</html>
Click to expand...
im trying to get in effect what you see on dell.com or alienware.com
when you change a computer componet like say instead of hard drive X
you choose hard drive Y all the prices change next to each componet i
know my document.write is in the wrong place to be exactly like the
dell ect. i was just trying to see if i could get it to work which i...
cant:(I would try to make it a little simpler by making 2 small changes.
Click to expand...
1) Change function f1 to accept arguments you want to set vars to.
the function would look like this:
function f1(theButton,a,b,c,d){
if (theButton.checked){
var v11 = a;
var v12 = b;
var v13 = c;
var v14 = d;
}}2)Change the input tags so you pass the radio button (this) to the function
as well as the other values..
<input type="radio" name="rb1" value="799.97" checked="checked" onclick
= "f1(this,0,25,75,100)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,25,0,25,50)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,50,25,0,25)">
<input type="radio" name="rb1" value="799.97" onclick =
"f1(this,75,50,25,0)">

Also I would leave the dollar sign and other formatting off untill you
display it in case you want to perform any math with the values.
HTH
Click to expand...
 
L

Lee

plemon said:
yeah i like the second response a lot although the first works i can
work the second one to my needs with less hassle and about adding them
up im going to change the values and add the values of the checked ones
instead of the variables or i will pass each value into a var and then
add the vars
Click to expand...

You'll find that you get more and better responses if it's easier
to ready what you post. Use standard punctuation and capitalization.
This isn't a chat room.


--
 
R

Richard Cornford

Peter Michaux wrote:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Click to expand...
if (document.form1.rb1[0].checked) {
Click to expand...
^^^^^^^^^^^^^^^^^^
<form name="form1" action="#">
Click to expand...
<snip>

The "shortcut" property accessors of referencing a named form as a named
property of the document, and referencing a named form control as a
property of the FORM element should not be expected to be available in
XHTML DOMs. If you are going to script a DOM in a way based upon the
assumption that it will be an HTML DOM that is being scripted it makes
more sense to mark-up the document in a way that is unambiguously HTML,
not XHTML.

Richard.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

when i change the class of the form the script stops working 0
I dont get this. Please help me!! 2
headache 1
I am trying to make an audio player, how do I get the selected file to be playable? 5
Javascrip code wont run properly. 2
How can I hide a div using an event listener on multiple checkboxes? 6
What am I doing wrong? 9
I Need Help with making a function that draws in a canvas using location data. 1

Members online

No members online now.
Total: 35 (members: 0, guests: 35)
Robots: 665

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top