I want to make a button that can pass parameters but as you can see where I give the parameter "Jason" to it, it ends the line for the 'onclick' value. What should I do?

<script type="text/javascript">
    function greeting(name,age){
        alert("Hello, "+name+", you are "+age+" years old.");
    }
</script>
<form>
<input type="button" value="Click me" onclick="greeting("Jason",20)" />

I want to make a button that can pass parameters but as you can see where I give the parameter "Jason" to it, it ends the line for the 'onclick' value. What should I do?

<script type="text/javascript">
    function greeting(name,age){
        alert("Hello, "+name+", you are "+age+" years old.");
    }
</script>
<form>
<input type="button" value="Click me" onclick="greeting("Jason",20)" />

• javascript
• html
• xml

2 Answers 2

Use single quotes inside double quotes, otherwise you're terminating the string:

onclick="greeting('Jason',20)"
                 -^-   -^-

You need to use different quotes.

<input type="button" value="Click me" onclick="greeting('Jason',20)" />

Or you can use HTML entities.

<input type="button" value="Click me" onclick="greeting(&quot;Jason&quot;,20)" />

But onclick is pretty antiquated. I'd do something like this.

HTML:

<button type="button" class="js-greeting" data-name="Jason" data-age="20">Click me</button>

JS (plus jQuery; you can do it without, but cross-browser issues still make it gross):

$(function() {
    $('.js-greeting').click(function() {
        var name = $(this).data('name');
        var age = $(this).data('age');

        alert("Hello, " + name + "; you are " + age + " years old.");
    });
});