creating elements help

**llorax** · 04-30-2007, 01:46 AM

I have a bunch of elements for navigation on my site and I am putting javascript within these elements. Here is just an html example:

function site() {
document.getElementById("content").innerHTML = "<h1>Site</h1><br><h2>a little bit about intomyheart.org...</h2>
<p>Intomyheart.org domain is my second domain name after I lost my first domain (Twistedbeauty.net) of 5 years.</p>
<h2>Credits</h2>
<p>Domain Register: <a href=\"http://www.975register.com"/>975register.com</a>
Host: <a href="http://www.hostforweb.com">hostforweb.com</a>
HTML: Dreamweaver
FTP: Fetch
Graphics: <a href="http://www.adobe.com">Adobe Suite CS2</a>
HTML and Javascript help: Dynamic Drive</p>";
}

As soon as the a href" is first used, the code breaks back into javascript and destroys the rest of the code. It seems to no longer contain it within the element. How do I change that?

**boxxertrumps** · 04-30-2007, 02:00 AM

this:
<a href="http://www.adobe.com">Adobe Suite CS2</a>
should have the quotes escaped like so:
<a href=\"http://www.adobe.com\">Adobe Suite CS2</a>
the way the js engine sees it...

innerhtml = "this is a string, but when it comes to an <a href=" Not A string Anymore,, the quote starts and ends strings...

Its the same as php and any other language with strings.

**llorax** · 04-30-2007, 10:06 PM

There seems to still be a problem with the code. None of the links work! Can anyone catch any mistakes in my coding?

<html>
<head>
<title>Intomyheart.org v 3.0</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
function me() {
document.getElementById("content").innerHTML = "<h1>Me</h1><br><h2>a little bit about me...</h2>
}
function site() {
document.getElementById("content").innerHTML = "<h1>Site</h1><br><h2>a little bit about intomyheart.org...</h2>
<p>Intomyheart.org domain is my second domain name after I lost my first domain (Twistedbeauty.net) of 5 years.
I found the name intomyheart appropriate because designing websites has always been a key part of what I do. By
viewing my artwork and my websites, you are quite literally going into my heart.</p>
<h2>Credits</h2>
<p>Domain Register: <a href=\"http://www.975register.com\">975register.com</a><br>
Host: <a href=\"http://www.hostforweb.com\">hostforweb.com</a><br>
HTML: <a href=\"http://www.adobe.com\">Dreamweaver MX 2004</a><br>
FTP: <a href=\"http://www.fetchsoftworks.com\">Fetch</a><br>
Graphics: <a href=\"http://www.adobe.com\">Adobe Suite CS2</a><br>
HTML and Javascript help: <a href=\"http://www.dynamicdrive.com\">Dynamic Drive</a></p>
<h2>Past Layout</h2>
<p><img src=\"images/unlimitedtime.gif\"><br>
<center><b>January 2006</b></center></p>";
}
function current() {
document.getElementById("content").innerHTML = "<h1>Current Project</h1><br><h2>today's work...</h2>
<p>Right now I am building a website for the Worcester Band, the American Mother****ers
and helping them out with some cd designs. Over the summer I will be designing several websites
including the redesigning of Emerson's Fashion Magazine, <a href=\"http://www.emmagonline.com\">Em Mag.</a>
<center><img src=\"images/amf.jpg\"></center>";
}
function projects() {
document.getElementById("content").innerHTML = "<h1>Past Projects</h1><br><h2>yesterday's work...</h2>
<script type=\"text/javascript\">

var portfolio=new Array()
portfolio[0]=[\"photo2.jpg\", \"Kill Conrad\", \"images/kc.jpg\"]
portfolio[1]=[\"photo3.jpg\", \"The Evvy Awards 25\", \"imagse/evvyawards.jpg\"]
portfolio[1]=[\"photo3.jpg\", \"The Wonder Years\", \"imagse/massivecon.jpg\"]
portfolio[2]=[\"photo4.jpg\", \"Mass Bay District\", \"http://www.mbdyruu.org/\"]

var thepics=new photogallery(portfolio, 3, 1, '310px', '340px') <\/script>";
}
function contact() {
document.getElementById("content").innerHTML = "<h1>Contact</h1><br><h2>my 411...</h2>
<form action=\"formmail.php\" target=\"content\" method=\"post\">
Name: <input type=\"text\" name=\"name\" size=\"40\"><p>
Email : <input type=\"text\" name=\"email\" size=\"40\"><p>
Comments : <br><textarea name=\"comments\" cols=45 rows=\"3\"></textarea><p>
<input type=\"submit\" value=\"Submit\">
</form>";
}
</script>
</head>
<body>

<table id="table" cellspacing="0" cellpadding="0">
<tr>
<td colspan="5">
<img src="images/layout_01.gif" width="662" height="40" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="images/layout_02.gif" width="14" height="365" alt=""></td>
<td rowspan="2"><img src="images/heart.gif" width="316" height="351" border="0" usemap="#Map"></td>
<td colspan="3">
<img src="images/layout_04.gif" width="332" height="9" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/layout_05.gif" width="5" height="356" alt=""></td>
<td>
<div id="content">
Welcome to intomyheart.org! This is my third layout for this site which is barely a year old. Though this started very much as a personal site, I am starting to develope it into my web portfolio. </p>
<p>Please use the navigation on the left to view my work as a web designer.</p>
<p>If you run into any problems with the site or have questions for me, feel free to use the <a href="javascript:contact()">email form</a> under contacts or simply send me an <a href="mailto:llora@mcgraths.org">email</a>.
</div></td>
<td rowspan="2">
<img src="images/layout_07.gif" width="16" height="356" alt=""></td>
</tr>
<tr>
<td>
<img src="images/layout_08.gif" width="316" height="14" alt=""></td>
<td>
<img src="images/layout_09.gif" width="311" height="14" alt=""></td>
</tr>
</table>

<p align="center">Is your computer flash compatible? View my flash site <a href="index.html">here</a>.</p>

<map name="Map">
<area shape="rect" coords="7,115,32,131" href="javascript:me()">
<area shape="rect" coords="220,6,245,23" href="javascript:site()">
<area shape="rect" coords="275,57,315,77" href="javascript:contact()">
<area shape="rect" coords="233,184,314,202" href="javascript:current()">
<area shape="rect" coords="46,260,120,277" href="javascript

rojects()">
</map>
</body>
</html>

**Bob90** · 05-01-2007, 12:02 AM

A big error you're making is not closing strings. If you want strings to go over lines you must make each one complete and add a +

Like this.

Code:

something.innerHTML = "line 1 of total string"
+ "line 2"
+ "line 3"

Notice each line has a " to start and finish.

**llorax** · 05-01-2007, 04:38 PM

Even when I have all the content on one line, it claims there is a 'potential unsafe operation'.

**llorax** · 05-01-2007, 05:00 PM

Here is the current code:/ I still can't figure out what is wrong!

**jscheuer1** · 05-01-2007, 05:09 PM

Works here. You're not talking about the local Active X warning in IE, are you?

**llorax** · 05-09-2007, 07:35 PM

no im using firefox

**Twey** · 05-09-2007, 08:18 PM

Because the Javascript interpreter can end statements at linebreaks, doing:

Code:

"str1"
+ "str2"

... can be considered two separate statements, the latter of which has no effect (it returns NaN in this case, but nothing is done with the return value). So, you should put the operator on the line before:

Code:

"str1" +
  "str2"

However, rather than doing this, you should have the content already loaded in <div>s, which are hidden (by script) on page load then shown by your script later. This allows non-Javascript users to actually see something.

**mwinter** · 05-09-2007, 09:07 PM

Originally Posted by Twey

Because the Javascript interpreter can end statements at linebreaks,

Only with restricted productions: the postfix increment and decrement operators (the prefix forms are not restricted), and the continue, break, return, and throw statements. Even then, the statement is only terminated prematurely if the line terminator occurs in a particular location. See section 7.9 Automatic Semicolon Insertion in ECMA-262, 3rd ed. for more detailed information.

Code:

"str1"
+ "str2"

... can be considered two separate statements

Only by a broken interpreter.

So, you should put the operator on the line before:

I would recommend the precise opposite. I find it much easier to understand expressions split over several lines if the operator occurs at the beginning of the next line; I only have to scan to the first non-white space character to decide if the line is a continuation or not. I would indent the continued lines, though.

llorax: There is nothing syntactically wrong with the code you included in your last post.

Mike

Thread: creating elements help

Thread Tools

Search Thread

creating elements help

Bookmarks

Bookmarks

Posting Permissions