annoying problem

A

andreyvul

I'm using Firefox's Web Development toolbar and it whines about
function bar() not found:
<html>
<head>
<script type='"text/javascript">
function foo() {
document.write("<input type=\"button\" value=\"bar\" onclick=
\"bar();\">");
}

function bar() {

}
</script>
</head>
<body>
<input type="button" value="baz" onclick="foo();" />
</body>
</html>

Any clue on how to fix it without inlining the contents of bar()
inside the onclick of the button generated by foo()?
 
T

Thomas 'PointedEars' Lahn

andreyvul said:
I'm using Firefox's Web Development toolbar and it whines about
function bar() not found:
<html>
<head>
<script type='"text/javascript">
function foo() {
document.write("<input type=\"button\" value=\"bar\" onclick=
\"bar();\">");
}

[...]
<input type="button" value="baz" onclick="foo();" />
Click to expand...

What you presumptuously call "whining" is its correctly reporting that the
current execution context does not define a callable object that can be
referred to by this name. As you have overwritten the previous context
where that object was defined when you called document.write() after the
document was fully loaded. That behavior of the UA is in full compliance
with W3C DOM Level 2 HTML.

http://www.w3.org/TR/DOM-Level-2-HTML/
Any clue on how to fix it without inlining the contents of bar()
inside the onclick of the button generated by foo()?
Click to expand...

Don't use document.write() but other DOM methods instead.

Thank you for wasting the time of other people by needlessly asking a
Frequently Asked Question.

http://jibbering.com/faq/


PointedEars
 
J

Joost Diepenmaat

andreyvul said:
I'm using Firefox's Web Development toolbar and it whines about
function bar() not found:
<html>
<head>
<script type='"text/javascript">
function foo() {
document.write("<input type=\"button\" value=\"bar\" onclick=
\"bar();\">");
}

function bar() {

}
</script>
</head>
<body>
<input type="button" value="baz" onclick="foo();" />
</body>
</html>

Any clue on how to fix it without inlining the contents of bar()
inside the onclick of the button generated by foo()?
Click to expand...

document.write on a loaded page replaces the page. so no bar() for you.

use the DOM instead.

Joost.
 
T

Thomas 'PointedEars' Lahn

Joost said:
document.write on a loaded page replaces the page. so no bar() for you.

use the DOM instead.
Click to expand...

JFTR: The OP is using the DOM already, only in a wrong way.


PointedEars
 
A

andreyvul

Solution: use <div id="foo"></div> as a placeholder and use
document.getElementById("foo").innerHTML= instead of
document.write( ).
Problem solved.
Is this the Right Way of using the DOM method for dynamic content
generation?
 
T

Thomas 'PointedEars' Lahn

andreyvul said:
Solution: use <div id="foo"></div> as a placeholder and use
document.getElementById("foo").innerHTML= instead of
document.write( ).
Problem solved.
Click to expand...

In your test case.
Is this the Right Way of using the DOM method for dynamic content
generation?
Click to expand...

No. RTFM, STFG, STFW.


PointedEars
 
J

Jeremy J Starcher

Solution: use <div id="foo"></div> as a placeholder and use
document.getElementById("foo").innerHTML= instead of document.write( ).
Problem solved.
Is this the Right Way of using the DOM method for dynamic content
generation?
Click to expand...

..innerHTML is not a DOM standard (yet). Although a lot of browsers
support it, not all do. Even among those that do support it, it has many
well-known issues. I recommend avoiding it unless you understand those
issues.

< URL http://inmyexperience.com/archives/000428.shtml >

createElement and and that family of calls are a far better way to
make the changes, though you should make sure that they are available
before calling them blindly.

Check google groups for 'Code Worth Recommending Project" and "gebi" for
a rather long but good discussion about how to "feature test" before
blindly calling these functions.
 
A

andreyvul

.innerHTML is not a DOM standard (yet). Although a lot of browsers
support it, not all do. Even among those that do support it, it has many
well-known issues. I recommend avoiding it unless you understand those
issues.

< URLhttp://inmyexperience.com/archives/000428.shtml>

createElement and and that family of calls are a far better way to
make the changes, though you should make sure that they are available
before calling them blindly.

Check google groups for 'Code Worth Recommending Project" and "gebi" for
a rather long but good discussion about how to "feature test" before
blindly calling these functions.
Click to expand...

I'm looking at the DOM specs yet I can't find way to add raw HTML
inside a <div></div> without a chain of createElement() calls.
 
T

Thomas 'PointedEars' Lahn

andreyvul said:
I'm looking at the DOM specs yet I can't find way to add raw HTML
inside a <div></div> without a chain of createElement() calls.
Click to expand...

The reason you can't find anything else in the specs is that there is no
other standards-compliant way (yet?). However, try to think of that as an
advantage. You may need more calls but in a conforming implementation you
won't be able to generate any invalid markup, much in contrast to using
innerHTML, and if something fails you stay in control in every step on the
way. It would appear that this is the main reason why `innerHTML' was not
standardized (yet?).


PointedEars
 
J

Jeremy J Starcher

I'm looking at the DOM specs yet I can't find way to add raw HTML
inside a <div></div> without a chain of createElement() calls.
Click to expand...

*nods*

Depending on exactly what you are doing, there are a few shortcuts that
can be taken. You could create your HTML as regular HTML in the page,
hide it with CSS, and move the node to where you need it later.

This works on modern browsers. Fails with my cell phone though, I end up
seeing stray HTML at the bottom of the page.

Google for 'innerHTML replacement' for some other ideas.
 
J

Joost Diepenmaat

andreyvul said:
I'm looking at the DOM specs yet I can't find way to add raw HTML
inside a <div></div> without a chain of createElement() calls.
Click to expand...

I wrote a short bit of code that gets rid of a lot of annoying DOM calls:

with(htmlGenerator) {
target_element.appendChild(
div({ style: { border: "1px solid black", margin: "1em",padding: "0.5em" } },
h2("Some created elements"),
p("The time right now is ",(new Date()).toUTCString()),
p("a paragraph containing ",
a({href:"#top"},"a link"),
" and some more text"),
div({
style: {
border: "1px solid black",
cursor: "pointer",
color: "#ffff00",
backgroundColor: "black"
},
onclick: function() {
var bg = this.style.backgroundColor;
this.style.backgroundColor = this.style.color;
this.style.color=bg;
}},
"This is a <div> with an onclick handler."
)
// etc


It looks ugly (it would look a lot better using lisp syntax) but it
seems to work OK. Also, it's a bit shorter than the generated HTML. Plus
you can write out the event handlers directly (which was the main reason
to function calls)

I could post the (not very well tested, but fairly simple) supporting
code if anyone's interested.

Joost.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help me sort out this script 1
I want to Display Excel As HTML In js 2
How do I hide the modal after 5 seconds? 4
How to treat an input data as variable? 4
How do I output this recursive function correctly to a web browser? 2
Javascipt problem. 22
Song requests 4
Javascrip code wont run properly. 2

Members online

No members online now.
Total: 38 (members: 1, guests: 37)
Robots: 487

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top