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:

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:

Code:

/* 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:

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.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:

Code:

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

and got a syntax error...

In using your getElementsById and original syntax:

Code:

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:

Code:

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:

Code:

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:

Code:

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:

HTML Code:

<div><img name="myImage" style="visibility: hidden;" alt=""></div>

**jscheuer1** · 02-16-2009, 10:55 AM

How about (tested and validated):

Code:

<!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...

Thread: Learning JavaScript

Thread Tools

Search Thread

Learning JavaScript

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions