Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New Coder
    Join Date
    Nov 2007
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Output to content div using custom function showit

    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.

    Code:
    <!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

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    974
    Thanks
    19
    Thanked 212 Times in 210 Posts
    showit is removing every
    thing before adding the
    latest thing.

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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:
    Code:
    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?

  • #4
    New Coder
    Join Date
    Nov 2007
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    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...

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

  • #6
    New Coder
    Join Date
    Nov 2007
    Posts
    42
    Thanks
    3
    Thanked 0 Times in 0 Posts
    right I have that bit working and its all good 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?

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,969
    Thanks
    56
    Thanked 557 Times in 554 Posts
    Quote Originally Posted by Hayes View Post
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •