Output to content div using custom function showit

Hayes

03-19-2012, 05:44 PM

Hi Guys, Before I get started explaining my problem I would like to make it clear that this is a university web scripting assignment so I will not be asking for answers just advice as im stuck.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<style>
body{font-family: Arial,sans-serif; background-color: #86bfc9;}
#content{float:right; width: 75%;}
</style>
<script type = "text/javascript">
function showit(what,where)
{
var node = document.getElementById(where);
while( node.firstChild )
node.removeChild( node.firstChild );
node.appendChild( document.createTextNode(what) );
}
function hello()
{
alert("I'm a Computer Solutions Degree student,\n get me out of here");
}
function timestable()
{
str="you code times table here";
showit(str,"Results");
}
function formattedtimestable()
{
str="you code formatted times table here";
showit(str,"Results");
}
function alerttimestable()
{
str="you code alert times table here";
// you code here
alert(str);
}
</script>
</head>
<body>
<h1>JavaScript Exercises </h1>
<div id="content"> <div id = "Results"></div> </div>
<a href="#" OnClick = "hello()">Hello Alert</a> <br/><br/>
<a href="#" OnClick = "timestable()">Times Tables</a> <br/><br/>
<a href="#" OnClick = "alerttimestable()">Times table in an alert box</a>
<br/><br/>
<a href="#" OnClick = "formattedtimestable()">Times Tables in a Table</a>
<br/><br/>
</body>
</html>

I have been given this skeleton code and need to created the relevant times tables so a times table in a alert box, a times table in a table and a standard times table. Now the problem isn't creating the table as that's easy the problem is with the showit function. When I use the function it only prints the string once and nothing else so for example if I did

for(x = 0; x< 9; x++)
{
showit(x, "Result");
}

it will only show 8 not 1-2-3-4-5-6-7-8.

or if i did

showit("Danny", "Result");
showit("Joe", "Result");

it will only output Joe not Danny.

The content needs to go in the content div and I cant make it output more than one thing which of course is a problem as I need to output the times tables.

Sorry for the poor explanation.

Hope someone can shed some light on this
Many Thanks
Danny

DaveyErwin

03-19-2012, 06:00 PM

showit is removing every
thing before adding the
latest thing.

xelawho

03-19-2012, 06:06 PM

did you write this code? because it is doing exactly what you are telling it to, but you are saying you want it to do the opposite.

have a look at this bit:
while( node.firstChild )
node.removeChild( node.firstChild );
node.appendChild( document.createTextNode(what) );

in plain English: if the node where you are showing your results has a child, remove it, then create another.

how could it ever do anything but show the result of the last code fed to the function and wipe out all that has come before it in the process?

Hayes

03-19-2012, 06:09 PM

Thanks for the fast responses, no i didnt write that skeleton code it is what we have been provided with and have to use. So with this code is it even possible to do what I need it to do?

xelawho

03-19-2012, 06:21 PM

assuming that the remove child line is there for a reason (so that your results div gets cleared because showit can be called to do various things), it would seem that the best way would be to create the content before passing it to the function as a single argument.

Which doesn't seem to be a very good way to do it at all, but if that's what the assignment asks for, I guess it might look something like this...

y="" //create empty string
for(x = 0; x< 9; x++){
y+=x //adds each iterated value of x to string as loop progresses
}
showit(y, "Result"); //once loop is finished, feed entire string to function as argument

Hayes

03-19-2012, 07:17 PM

right I have that bit working and its all good :thumbsup: thanks very much! the last problem I have is parsing html code such as <br /> or <td> through as in the function show it you create a text node so the html code gets turned to text! How would I get around this?

xelawho

03-19-2012, 07:51 PM

in the function show it you create a text node so the html code gets turned to text

yeah, that's going to make it tricky