what happen when you use onclick={} instead of onclick=""?

Question

<script>
    function hello(val)
    {
        alert(val);
    }
</script>
<button onclick="hello('hello')"">hello</p> <!-- works and prints hello -->
<button onclick={hello()}>hello 2</button> <!-- works and prints undefined -->
<button onclick={hello("hello3")}> hello 3</button> <!--also works even though intellisence put a squigly red line under the first quote "-->
<button onclick={hello("does not work")}> hello 3</button> <!-- does not work, error is show in console Invalid or unexpected token -->

I know that inline js should be treated carefully, im trying to explain that to other people with this example, however i dont what is happening underneath.

My explnation is that if you change something that is expected you would get undesired results, however i feel that my explanation is superficial and not enough, so could someone explain what is happening underneath that is casuing this wierd behaviour?

Does this answer your question? [Curly brackets in HTML](https://stackoverflow.com/questions/15279240/curly-brackets-in-html) — micahlt, Jul 19 '22 at 20:01
That syntax might mean something completely different in the context of React (jsx). — Wyck, Jul 19 '22 at 20:08
@Wyck I assumed since the only tag on this question is `javascript` that it wasn't related to JSX or React. — micahlt, Jul 19 '22 at 20:26
HTML attributes should be wrapped in quotes. [More info](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started#attributes) — James, Jul 19 '22 at 20:32

t.niese · Accepted Answer · 2022-07-20T09:57:54.503

2

If it is only about HTML and no framework is involved, then what you observe is partially explained in HTML attribute with/without quotes

An attribute value can either be enclosed in " or ' or consist of a value that is not enclosed by quotes, and such a value must not contain spaces.

So <button onclick={hello()}>hello 2</button> it is equivalent to <button onclick="{hello()}">hello 2</button> and onclick has the value {hello()}, which is valid JS (the hello() is just within a block).

For <button onclick={hello("does not work")}> the value ends at the first space so it is equivalent to <button onclick="{hello("does" not="" work")}="">, there onclick has the value {hello("does and that's not valid JS.

edited Jul 20 '22 at 09:57

answered Jul 19 '22 at 20:04

t.niese

39,256
9
74
101

@ezio yes I forgot the `"` fixed that. `is there a reference for what could the value enclosed with ?` the specification [13.1.2.3 Attributes](https://html.spec.whatwg.org/multipage/syntax.html#attributes-2), a value can be quoted (enclose in `"` or `'`) or unquoted. For the HTML parser, the `{` or `}` in the unquoted value has no syntactical meaning (except that it is a valid character for an unquoted value) – t.niese Jul 20 '22 at 05:13
i assume in third button it adds single quotes instead of double quotes because the parameter of hello are in double quotes right so it is equivalent to `onclick='hello("hello3&quote;)' ` but the ide cant figure it out somehow and that why it put a red squigly line right ! and i think you confused the third button with the forth, the forth should be equivalent to `onclick=”{hello"does” ` not `{alert("hel` – ezio Jul 20 '22 at 08:25

what happen when you use onclick={} instead of onclick=""?

1 Answers1