6 Replies - 6820 Views - Last Post: 29 August 2013 - 06:37 AM

#1 faylan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-August 13

problem: calling js function in html div tag

Posted 29 August 2013 - 04:40 AM

So I have my header and footer code in some js functions in a external js file. I need to call the functions in the div tags for my header and footer but its just not working. Here is my code.

html code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head><!--start head --> 
		<meta name="author" content="Brandon Pharr" />
		<meta name="description" content="JSChapter01" />
		<meta name="keywords" content="Client Side Programming, JavaScrip, CSS" />
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<meta http-equiv="Content-Language" content="en-us" />
		<link rel="stylesheet" href="CS2513-JavascriptStyleSheet.css" type="text/css" media="screen" />
		<script type="text/javascript" src="CSP.js">	
		</script>
	<title>Client Side Programming Home Page</title>
	</head><!--end head -->
	
	<body><!--start body -->
	<div id="container"><!--start container -->
		<div id="header" "displayHeader()"><!--start header -->
			
		</div><!--end header -->
		
		<div id="content"><!--start content -->
			<p>
				Java Script is a computer programming language used within html web documents.
				The language was made to enhance the functionality of web pages to be more interactive.
				Java Script is a client side programming language.
				Meaning the code is processed in the web broswer on the clients machine.
			</p>
		</div><!--end content -->
		
		<div id="footer" "displayFooter()"><!--start footer -->
			
		</div><!--end footer -->
	</div><!--end container -->
	</body><!--end body -->
</html>



external js code
function displayHeader()
{
    <!-- HIDE FROM INCOMPATIBLE BROWSERS
    /*<! [CDATA[*/
        document.write('<img src="Javascript.png" alt="Javascript Image" width="180" height="147"/>');
			
        document.write("<h2>CS2513 Client Side Programming</h2>");
			
        document.write("<ul>");
            document.write("<li><a href='index.html'>Home</a></li>");
            document.write("<li><a href='calculator.html'>Calculator</a></li>");
            document.write("<li><a href='#'>CSP05</a></li>");
            document.write("<li><a href='#'>CSP06</a></li>");
            document.write("<li><a href='#'>CSP07</a></li>");
            document.write("<li><a href='#'>CSP08</a></li>");
            document.write("<li><a href='#'>CSP09</a></li>");
            document.write("<li><a href='#'>CSP010</a></li>");
            document.write("<li><a href='#'>CSP011</a></li>");
            document.write("<li><a href='#'>CSP012</a></li>");
            document.write("<li><a href='#'>CSP014</a></li>");
            document.write("<li><a href='#'>CSP015</a></li>");
        document.write("</ul>");
    /*]]> */
    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->
}

function displayFooter()
{
    <!-- HIDE FROM INCOMPATIBLE BROWSERS
    /*<! [CDATA[*/
	document.write("Last Updated: " + document.lastModified);
        document.write('<p>Email: <a href="mailto:brandon.j.pharr@my.occc.edu">brandon.j.pharr@my.occc.edu</a> Phone (405) 555-1234	Logo reference: <a href="http://inspiredtalents.com/wp-content/uploads/2012/08/javascript.png" target="_blank">Javascript.png</a></p>');
	document.write('<p>Oklahoma City Community College does not necessarily endorse the content or respective links of this page. </p>');
    /*]]> */
    // STOP HIDING FROM INCOMPATIBLE BROWSERS -->		
}



The functions have to be called inside my header and footer div tags. Those are the instructions given in my homework. I don't know how to do this. onload= cant be used in the div so im clueless as how to go about this.

Is This A Good Question/Topic? 0
  • +

Replies To: problem: calling js function in html div tag

#2 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 498
  • View blog
  • Posts: 3,317
  • Joined: 12-January 10

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 04:59 AM

some of them look liek you have forgot the ; after the function


showfooter()
should be 
showfooter();



start with that and look over all your functions.

also you need to tell us the errors youre getting.
Was This Post Helpful? 0
  • +
  • -

#3 faylan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-August 13

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 05:12 AM

Im not getting a error my problem is my displayHeader and displayFooter functions in my external js file are not getting called. I need to call them in my html header and footer div tags and I have put...
<div id="header" "displayHeader()">

<div id="footer" "displayFooter()">



The function calls are in there and they don't get called. I don't know the proper syntax for function calls within a div tag. Maybe im reading my homework wrong because I have looked and as far as I can tell you cant do what Im trying to do. Is there a way to just call the functions in the body of the div and no in the tags itself.
Was This Post Helpful? 0
  • +
  • -

#4 DarenR  Icon User is offline

  • D.I.C Lover

Reputation: 498
  • View blog
  • Posts: 3,317
  • Joined: 12-January 10

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 05:56 AM

div's have no onload event

best you can do is something like

<div id="test"></div>
<script text/Javascript>
yourFunction();</script>

<div id"nextDiv></div>
<script text/Javascript>
yourOtherFunction();</script>




and so on

you basically place the call right under the div you want the call to affect
Was This Post Helpful? 0
  • +
  • -

#5 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 3577
  • View blog
  • Posts: 10,444
  • Joined: 08-June 10

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 06:01 AM

Quote

The function calls are in there and they don't get called.

why should they? from where should the HTML parser know that this invalid string* is a JS function?


* - structure of an HTML tag: <{tag_name} {attribute_name}="{attribute_value}">, or as a simplified Regular Expression: <\w+( \w+=('|").*('|"))*/?> (in words: an "<", the tag name, (repetetively) an attribute name with (in some cases also without) a value wrapped in quotes (which can be omitted in special cases) and a ">"
Was This Post Helpful? 0
  • +
  • -

#6 faylan  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 5
  • Joined: 29-August 13

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 06:32 AM

Ok so it is impossible to actually do it in the tag.
This is what my homework stated.

"Move the link to CSP.js to the top between the <head> tags
In the <div id="header"> tag, call the displayHeader() function
In the <div id="footer"> tag, call the displayFooter() function"

I guess I took the "In" part out of context. Thanks for the clarification and help.
Was This Post Helpful? 0
  • +
  • -

#7 BetaWar  Icon User is offline

  • #include "soul.h"
  • member icon

Reputation: 1201
  • View blog
  • Posts: 7,309
  • Joined: 07-September 06

Re: problem: calling js function in html div tag

Posted 29 August 2013 - 06:37 AM

In this case the "In" part refers to within the div tag. Not actually in the tag itself, but between the opening and closing div tags for the header and footer.

Notice that your code uses document.write, this should be run inline (otherwise it will just overload the page content). If you add another set of script tags and call the respective functions in the appropriate areas you should see the expected output.

Hope that helps.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1