Re: NOOB question: getting onclick to work
RobG
> Apologies for bringing in a question that's doubtless been asked
> and answered 87M times already.
That's what the FAQ is for:
<URL: http://www.jibbering.com/faq/ >
however I don't think it will answer your specific question.
> I have this little toy script that's meant to increment or
> decrement a value according to a button push and display the new
> value. I'm using the rhino book as my reference, but evidently
> misunderstanding something because this looks like it should
> work, but it doesn't.
>
> '<script type="text/javascript">
> var foo=0 ;
> document.write("<form><table><tr><td>") ;
Don't break the start and end tags of an element across multiple
document.write statements, much better to give it a complete chunk of
HTML to work with. Also, multiple writes are slow, so create a single
string then document.write that.
> document.write("<input class=\"active\" type=\"button\"
> value=\"<\" onclick=\"function(){foo--;}\">") ;
Manually wrap lines for posting at about 70 characters to prevent auto-
wrap from introducing errors. You'll likely get help much faster if
your code can be copied and pasted and "work" without modification.
Another tip is to use single quotes within script, and double quotes
for HTML - it saves a lot of quoting, so:
var html = '<input class="active" type="button" '
+ 'value="" onclick="function(){foo--;}">';
The content of an intrinsic event attribute is script that is
converted to a function by the browser. There are many
inconsistenacies, you've found one. IE is OK with the script as
you've written it, however Firefox wants just the function body, so:
+ 'value="" onclick="foo--;">';
> document.write(foo);
> document.write("<input class=\"active\" type=\"button\"
> value=\">\" onclick=\"function(){foo++;}\">") ;
> document.write("</td></tr></table></form>") ;
> </script>'
Here's an updated version:
<script type="text/javascript">
var foo = 0;
document.write('<form><table><tr><td>'
+ '<input class="active" type="button" value="<"
onclick="foo--;">'
+ foo
+ '<input class="active" type="button" value=">" onclick="foo+
+;">'
+ '</td></tr></table></form>'
);
</script>
<button onclick="alert(foo);">click</button>
I'll leave it to you to work out how to get the value shown in the
page (the FAQ can help with that).
--
Rob
Thomas 'PointedEars' Lahn
> Another tip is to use single quotes within script, and double quotes
> for HTML - it saves a lot of quoting, so:
>
> var html = '<input class="active" type="button" '
> + 'value="" onclick="function(){foo--;}">';
ACK. However, with the operator of a multi-line operation positioned at the
beginning of the next line (which I practice and recommend, too), it would
appear to be better to add the infix (white)space at the beginning of the
string literal in the next line (for the same reason as chosen for the
leading instead of trailing operator).
> The content of an intrinsic event attribute is script that is
> converted to a function by the browser. There are many
> inconsistenacies, you've found one. IE is OK with the script as
> you've written it, [...]
Whereas that is IMHO not only an inconsistency, but a bug.
function() {foo--;}
(an anonymous /FunctionExpression/) is not a syntactically Valid ECMAScript
/Program/.
Cf. <http://www.w3.org/TR/html401/types.html#type-script> and
<http://www.w3.org/TR/html401/interact/scripts.html#h-18.2.3>
PointedEars
--
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee