0

How to put HTML button in the javascript code? Following is my code which creates table in in javascript code and assign it to HTML div.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">

        $(document).ready(function()
        {           
                var tablecontents = "";
                tablecontents = "<table>";

                for(var i=1;i<=10;i++)
                {
                    tablecontents += "<tr>";
                    tablecontents += "<td>" + i + "</td>";
                    tablecontents += "</tr>";
                }
                tablecontents += "</table>";

                document.getElementById("myTable").innerHTML = tablecontents;
            }
        });

    </script>

  </head>
  <body> 
    <div id="myTable"></div>
  </body>
 </html>

The above code works fine and creates a table with 10 rows (one column in each row) for me. Now I wanted to create one more column in each row which would contain following button 

<button type="button" 
    id="myButton" 
    onclick="myButtonClicked()" 
    class="myButton">Click ME
</button>

I tried like this

tablecontents += "<td>

<button type="button" 
    id="myButton" 
    onclick="myButtonClicked()" 
    class="myButton">Click ME
</button>

</td>";

But due to syntax error or something else, nothing was appearing on my HTML form. I think I am making some error in quotes etc.

Improve this question
1
  • You are making errors to quotes. The error gives you the answer and you give yourself the answer. So to keep it simple, put everything on one line and use single quotes for the html. => "<td><button type='button' id='myButton'></button>" Commented Mar 30, 2014 at 3:32

3 Answers 3

Reset to default
2

Each button should have uniqe id,

Here is the solution 

for(var i=1;i<=10;i++){
    tablecontents += "<tr>";
    tablecontents += "<td>" + i + "</td>";
    tablecontents += "<td>";
    tablecontents += "<button type='button'"; 
    tablecontents += "id='myButton"+i+"'"; 
    tablecontents += "onclick='myButtonClicked()'"; 
    tablecontents += "class='myButton'>Click ME";
    tablecontents += "</button></td>";
    tablecontents += "</tr>";
}

UPDATED

DEMO

Put above code and function myButtonClicked when your dom is ready, you can put it after body tag something like

</body>
//put your scripts after body tag
<script>
    //...above code

    function myButtonClicked(){
         alert("I am clicked")
    }   

</script>
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

myButtonClicked is not firing with this approach.
@nkp, please have a look udpated answer.
yes, it is working. But problem now while passing parameter to myButtonClicked function. When I try tablecontents += "onclick='myButtonClicked("+i+")'";, it stops working.
1

Try this

tablecontents += '<td>

<button type="button" 
id="myButton" 
onclick="myButtonClicked()" 
class="myButton">Click ME
</button>

</td>';
Improve this answer

Comments

1

The problem is that when you do "<button type="button[...], the quotes after type ends the string literal, so js parser tries to look for a variable named button, which doesn't exist. Even if did existed, the engine wouldn't know what to do with it.

You can see the error in the developers console (F12 in Chrome/Opera. I think it's F10 in IE, not sure about Mozilla, though).

One solution is to escape the quotes with a slash, as:

tablecontents += "<td>

<button type=\"button\" 
    id=\"myButton\" 
    onclick=\"myButtonClicked()\" 
    class=\"myButton\">Click ME
</button>

</td>";

The other is to use a different types of quotes (single/double quotes):

tablecontents += '<td>

<button type="button" 
    id="myButton" 
    onclick="myButtonClicked()" 
    class="myButton">Click ME
</button>

</td>';

In JavaScript, single and double quotes works the same way, but are not interchangeable.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.