Log in

View Full Version : Resolved Learning JavaScript


mds1124
02-16-2009, 06:17 AM
Hi all - new to javascript and am having an issue that I have searched all over Google for and can't find my answer...

Working on a project that adds coins and displays them...That all works fine, but when I go to display them, the images are being displayed on a new page...I want them displayed on the same page...

Here is my code:


<!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>
<title>Coin Count</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="description" content="Coin Count">
<meta name="keywords" content="javascript, mouseover, html, css, php, ajax">
<link rel="stylesheet" href="testhome1.css" type="text/css">
<script type="text/javascript">
<!--
var rad_val, ind, val, cointot, result, picture
function coinCalculate()
{
for (var i=0; i < document.frmCoinCounter.rbType.length; i++)
{
if (document.frmCoinCounter.rbType[i].checked)
{
var rad_val = document.frmCoinCounter.rbType[i].value;
}
}

ind = document.frmCoinCounter.numberCoins.selectedIndex;
val = document.frmCoinCounter.numberCoins.options[ind].value;

cointot = rad_val * val;

document.frmCoinCounter.result.value = "$" + cointot;

if (rad_val==.25) picture="quarter.gif";
else if (rad_val==.10) picture="dime.gif";
else if (rad_val==.05) picture="nickel.gif";
else picture="penny.gif";

for (i=0;i<val;i++) {
document.write('<img border="0" src="' + picture + '">');
}



}
//-->
</script>
</head>
<body>

<h2><center>Coin Counter</center></h2>

<form name="frmCoinCounter">

<h3>Choose the denomination of coin to calculate</h3>

<h2><input type="radio" name="rbType" id="rbQuarters" value=".25">Quarters<br />
<input type="radio" name="rbType" id="rbDimes" value=".10">Dimes<br />
<input type="radio" name="rbType" id="rbNickels" value=".05">Nickels<br />
<input type="radio" name="rbType" id="rbPennies" value=".01">Pennies<br / >


<h3>Select number of coins to calculate:</h3>
<select name="numberCoins">
<option value="">Select A Number...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></h3>

<input type="button" id="btnCalc" name="btnCalc" onClick="coinCalculate()" value="Calculate Coins" />
<br /><br />
<input type = "text" name = "result" size = 10 value = "$0.00">
<br />
<br />
<input type = "reset">
<br />
<br />


</form>
</body>
</html>

Any images can be used as long as they are named correctly and here is the CSS file:


/* Layout Stylesheet */

body {
margin:5px;
background: green;
color: yellow;
text-align:center;
padding:5px;
}

li { color: black; font-size: 1.1em; text-align: left;}
p { color: blue; font-size: 1.1em; text-align: justify; padding:10px;}
h1, h2, h3, h4, h5, p { font-family: Comic Sans MS, Arial, Geneva, Helvetica, sans-serif;}
h1 { color: black; }
h2 { color: yellow; }
h3 { color: black; }
h4 { color: black; }
h5 { color: black; }
a:link { color: blue; }
a:visited { color: #996699; }
a:hover { color: red; }
a:active { color: blue; }
.content {background:green;color:white;}

And assistance/direction would be greatly appreciated...

I did meess around with the getElementByID vice the document.write and got error messages stating that the method was invalid for this???

Thanks In Advance...
Nile
02-16-2009, 06:19 AM
What was the exact error message you got when using getElementById()?
And can you post the code you tried please!
mds1124
02-16-2009, 06:29 AM
I'm confused - working on several issues at the same time - maybe I didn't use getElementByID on this project...

This is the code that I have and it displays the coins on a new page and I need to display everything on the same page...

Any assistance/direction anyone could provide would be greatly appreciated...

Thanks In Advance...
Nile
02-16-2009, 06:32 AM
Try:



<!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>
<title>Coin Count</title>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<meta name="description" content="Coin Count">
<meta name="keywords" content="javascript, mouseover, html, css, php, ajax">
<link rel="stylesheet" href="testhome1.css" type="text/css">
<script type="text/javascript">
<!--
var rad_val, ind, val, cointot, result, picture
function coinCalculate()
{
for (var i=0; i < document.frmCoinCounter.rbType.length; i++)
{
if (document.frmCoinCounter.rbType[i].checked)
{
var rad_val = document.frmCoinCounter.rbType[i].value;
}
}

ind = document.frmCoinCounter.numberCoins.selectedIndex;
val = document.frmCoinCounter.numberCoins.options[ind].value;

cointot = rad_val * val;

document.frmCoinCounter.result.value = "$" + cointot;

if (rad_val==.25) picture="quarter.gif";
else if (rad_val==.10) picture="dime.gif";
else if (rad_val==.05) picture="nickel.gif";
else picture="penny.gif";

for (i=0;i<val;i++) {
document.getElementById('coin_c').firstChild.nodeValue = "<img border="0" src="' + picture + '">";
}



}
//-->
</script>
</head>
<body>

<h2><center>CISS 232 - Lab 2 - Coin Counter</center></h2>
<div id="coins_c"></div>
<form name="frmCoinCounter">

<h3>Choose the denomination of coin to calculate</h3>

<h2><input type="radio" name="rbType" id="rbQuarters" value=".25">Quarters<br />
<input type="radio" name="rbType" id="rbDimes" value=".10">Dimes<br />
<input type="radio" name="rbType" id="rbNickels" value=".05">Nickels<br />
<input type="radio" name="rbType" id="rbPennies" value=".01">Pennies<br / >


<h3>Select number of coins to calculate:</h3>
<select name="numberCoins">
<option value="">Select A Number...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select></h3>

<input type="button" id="btnCalc" name="btnCalc" onClick="coinCalculate()" value="Calculate Coins" />
<br /><br />
<input type = "text" name = "result" size = 10 value = "$0.00">
<br />
<br />
<input type = "reset">
<br />
<br />


</form>
</body>
</html>
mds1124
02-16-2009, 07:02 AM
Used your syntax:


document.getElementById('coin_c').firstChild.nodeValue = "<img border="0" src="' + picture + '">";
}

and got a syntax error...

In using your getElementsById and original syntax:


document.getElementByID('coin_c').firstChild.nodeValue = ('<img border="0" src="' + picture + '">');
}

Am getting a runtime error message "Object doesn't support this property or method...
jscheuer1
02-16-2009, 07:27 AM
The quoting syntax is off, should be:


document.getElementById('coin_c').firstChild.nodeValue = '<img border="0" src="' + picture + '">';

But you cannot set an element string as a nodeValue unless you want the literal HTML code displayed. The below is valid, and assumes a firstChild exists to be replaced, and that picture is a valid image file:


var myImage = document.createElement('img');
myImage.border = 0;
myImage.src = picture;
document.getElementById('coin_c').replaceChild(myImage, document.getElementById('coin_c').firstChild);

There could also be other problems.
mds1124
02-16-2009, 08:40 AM
Thanks for the replies...

John - What if no firstChild exists???

Really didn't think this would be that difficult...

It is working, except the coin images are displaying on a new page and I want them to display on the page that the form/button are on...I.E. only want a one pager...

Thanks In Advance...

Mike...
jscheuer1
02-16-2009, 10:06 AM
If there is no firstChild, there will be an error. I'll have a look at your code and see what else might be going on. But for now, there is a much easier way to put an image into a spot on your page:


document.images.myImage.src = picture;
document.images.myImage.style.visibility = 'visible';

The markup this would work with, assuming that picture is a valid image file:


<div><img name="myImage" style="visibility: hidden;" alt=""></div>
jscheuer1
02-16-2009, 10:55 AM
How about (tested and validated):


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="description" content="Coin Count">
<meta name="keywords" content="javascript, mouseover, html, css, php, ajax">
<title>Coin Count</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="testhome1.css" type="text/css">
<script type="text/javascript">
<!--
var coinCalculate;
(function(){
var rad_val, ind, val, cointot, result, picture, img = new Image(), pic;
img.border = 0;
img.alt = 'Coin Image';
coinCalculate = function(){

var f = document.forms.frmCoinCounter.elements,
c = document.getElementById('coinarea');

for (var i = 0; i < f.rbType.length; ++i)
if (f.rbType[i].checked)
rad_val = f.rbType[i].value;

ind = f.numberCoins.selectedIndex;
val = f.numberCoins.options[ind].value;

cointot = rad_val * val;

f.result.value = "$" + (cointot.toFixed(2));

picture = rad_val < .05? "penny.gif" : rad_val < .10? "nickel.gif" : rad_val < .25? "dime.gif" : "quarter.gif";

c.innerHTML = '';

for (i = 0; i < val ; ++i) {
pic = img.cloneNode('true');
pic.src = picture;
c.appendChild(pic);
}
};
})();
//-->
</script>
</head>
<body>

<h2>Coin Counter</h2>

<form action="#" name="frmCoinCounter" onsubmit="return false;" onreset="document.getElementById('coinarea').innerHTML = '';return true;">
<div>

<h3>Choose the denomination of coin to calculate</h3>

<h2><input type="radio" name="rbType" id="rbQuarters" value=".25">Quarters<br>
<input type="radio" name="rbType" id="rbDimes" value=".10">Dimes<br>
<input type="radio" name="rbType" id="rbNickels" value=".05">Nickels<br>
<input type="radio" name="rbType" id="rbPennies" value=".01">Pennies<br></h2>


<h3>Select number of coins to calculate:</h3>
<select name="numberCoins">
<option value="">Select A Number...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>

<input type="button" id="btnCalc" name="btnCalc" onClick="coinCalculate()" value="Calculate Coins">
<br><br>
<input type = "text" name = "result" size = 10 value = "$0.00">
<br>
<br>
<input type = "reset">
<br>
<br>

</div><div id="coinarea">

</div>
</form>
</body>
</html>
mds1124
02-16-2009, 11:19 AM
John...

Awesome!!!

I didn't mean for you to re-write it though...Works perfectly...

Thanks so much and have a great day...

Being a Newbie, you'll probably see me around here a lot...LOL...

But, I am definitely learning...

Mike...
jscheuer1
02-17-2009, 04:59 PM
Well, sometimes I get a bit carried away with a small project like this. In this case, that has happened in the extreme, see:

http://home.comcast.net/~jscheuer1/side/coins/