replaceChild in response to user input

prizsm · 12-29-2003, 10:30 PM

I'm stumped as to why this code is not working. Any insights would be welcome.

Thanks
prizsm@uneedspeed.net

<html>
<head>
<title>Spanish Rice</title>
<script language="JavaScript">

var howMany = 1;

function fractionise( nFloat )
{
var nMajor = parseInt( nFloat );
var nMinor = ( nFloat - nMajor );
return ( nMajor + ( nMinor != 0 ? " 1/" + ( 1 / nMinor ) : "" ) );
}

function howmanyservings ()
{
var newServings = document.amounts;
var increase = document.servesform.howmany.value;
var ingOne = fractionise( parseInt( increase ) * parseFloat( newServings.beefbroth.value ) );
var beefBroth = document.getElementById( "beefBroth" );
beefBroth.replaceChild( ingOne, beefBroth.firstChild );

ingTwo = fractionise( parseInt( increase ) * parseFloat( newServings.brownrice.value ) );
var brownRice = document.getElementById( "brownRice" );
brownRice.replaceChild( ingTwo, brownRice.firstChild );
}

</script>
</head>
<body bgcolor=ffcc99>
<form name = "amounts">
<input type="hidden" name="beefbroth" value=".5">
<input type="hidden" name="brownrice" value=".25">
</form>
<table width=70% cellspacing=15>
<tr><td><h2><center>Spanish Rice</center></h2></td></tr>
<tr><td><center><i>serves </i><form name="servesform"> <input type="text" name="howmany" size=3 maxlength=3 value="1"></input></form><center><form name= "doit"><input type= "button" name= "multiply" value= "How many?" onclick= "howmanyservings ();"></input></form></center></td></tr>
</table>
<table cellspacing=15>
<tr><td id= "td1"><span id="beefBroth">1/2</span> cup beef broth &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp</td>
<td id= "td2"><span id="brownRice">1/4</span> cup brown rice</td>
</tr>
</table>
</body>
</html>

nolachrymose · 12-29-2003, 11:46 PM

ingTwo isn't a node..it's just a string of text (

Edit: and same with ingOne

). replaceChild() takes two nodes as parameters. The first parameter is the new node, the second is the old node which will be replaced.

Code:

ingTwo = fractionise( parseInt( increase ) * parseFloat( newServings.brownrice.value ) );
var brownRice = document.getElementById( "brownRice" );
brownRice.replaceChild( ingTwo, brownRice.firstChild );

Try this:

Code:

function howmanyservings ()
{
var newServings = document.amounts;
var increase = document.servesform.howmany.value;
var ingOne = fractionise( parseInt( increase ) * parseFloat( newServings.beefbroth.value ) );
var beefBroth = document.getElementById( "beefBroth" );
beefBroth.replaceChild( document.createTextNode(ingOne), beefBroth.firstChild );

ingTwo = fractionise( parseInt( increase ) * parseFloat( newServings.brownrice.value ) );
var brownRice = document.getElementById( "brownRice" );
brownRice.replaceChild( document.createTextNode(ingTwo), brownRice.firstChild );
}

Hope that helps!

Happy coding!

prizsm · 12-30-2003, 12:11 AM

I added the createTextNode and ran the code again, but got an error message at replaceChild invalid argument

Thanks for the input.

nolachrymose · 12-30-2003, 01:42 AM

Really? It worked for me (Firebird 0.7, Windows XP). What browser are you using?

prizsm · 12-30-2003, 01:44 AM

IE 6 I believe this browser will support replaceChild!?

nolachrymose · 12-30-2003, 01:48 AM

I just tested in IE 6, and oddly enough it didn't work. I tested to see if replaceChild() was supported, and it is. I'm just as confused as you, heh..

. Sorry, but I don't know the reason it's not working.

Happy coding!

prizsm · 12-30-2003, 02:05 AM

I'm sorry too! Thanks for spending the time on this riddle. If you get a sudden brainstorm and come up with a solution, let me know!