CODEWITHSUNDEEP
javascripthtmldom
user1556433
user1556433

Reputation:

How to put HTML button in the javascript code?

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.

Upvotes: 0

Views: 639

Answers (3)

Suman Bogati
Suman Bogati

Reputation: 6349

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>

Upvotes: 2

Ortiga
Ortiga

Reputation: 8814

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.

Upvotes: 1

Rupam
Rupam

Reputation: 1642

Try this

tablecontents += '<td>

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

</td>';

Upvotes: 1

Related Questions