CODEWITHSUNDEEP
javascripthtmlbuttoninput
janak gera
janak gera

Reputation: 65

how to make a button dynamically in Javascript

I am trying to make a dynamically button in javascript

    var button = document.createElement('input');
    button.setAttribute('type', 'submit');
    button.setAttribute('ID', 'btnSendMailClone');
    button.setAttribute('value', 'Submit');
    button.setAttribute('onclick', 'btnSendMail_Click()');
    button.setAttribute('form', 'myform');
    document.body.appendChild(button);
    button.setAttribute("class", "btn btn-primary");
    $('#button').addClass('myClass');
   $('#btnSendMailClone').css("margin-right", "100px")
    $('#btnSendMailClone').css("width", "98");

And by clicking on the event it should come on its click event

function btnSendMail_Click() {
           debugger;

        }

Button i debug its giving me error on this line

document.body.appendChild(button);

it says unable to get property append child.I am newbie to java script.Pleas guide what i am doing wrong

Upvotes: 0

Views: 5667

Answers (4)

prasanth
prasanth

Reputation: 22490

I think you document not ready to append .Try with append button after document.ready .And don't forget to add jquery link

Updated

center position button

$(document).ready(function() {
  var button = document.createElement('input');
  button.setAttribute('type', 'submit');
  button.setAttribute('ID', 'btnSendMailClone');
  button.setAttribute('value', 'Submit');
  button.setAttribute('onclick', 'btnSendMail_Click()');
  button.setAttribute('form', 'myform');
  document.body.appendChild(button);
  button.setAttribute("class", "btn btn-primary");
  $('#button').addClass('myClass');
  $('#btnSendMailClone').addClass('center')

})

function btnSendMail_Click() {
  console.log($('input')[0].outerHTML)
}
.center {
  margin: auto;
  width: 98px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

Fered
Fered

Reputation: 908

based on last line of your code it seems you are using jQuery, therefore I suggest you to create the button with it like :

var button = $('<button type="submit" id="btnSendMailClone" class="btn btn-primary" style="margin-right:100px:width:98%">Submit</button>');
button.on('click',btnSendMail_Click):
$('body').append(button);

hope it helps

Upvotes: 0

Weedoze
Weedoze

Reputation: 13943

Your code is working fine

var button = document.createElement('input');
button.setAttribute('type', 'submit');
button.setAttribute('ID', 'btnSendMailClone');
button.setAttribute('value', 'Submit');
button.setAttribute('onclick', 'btnSendMail_Click()');
button.setAttribute('form', 'myform');
document.body.appendChild(button);
button.setAttribute("class", "btn btn-primary");
$('#button').addClass('myClass');
$('#btnSendMailClone').css("margin-right", "100px")
$('#btnSendMailClone').css("width", "98");

function btnSendMail_Click() {
  console.log("Submit !");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Possible problem A

Your are using IE then you will have to replace

document.body.appendChild(button);

with

document.getElementsByTagName('body')[0].appendChild(button);

Possible problem B

Your script is inside the <head>. This will execute the script before the <body> has been seen by the browser. To solve this, move your script at the end of the document

Or your can use $(document).ready(function(){...})

Upvotes: 2

R. Keller
R. Keller

Reputation: 100

You have got many options. One simple Solution would be to test if body exists using:

if(document.body != null){ document.body.appendChild(button); }

Another Option would be to use it by selecting the tag name:

document.getElementsByTagName('body')[0].appendChild(button);

For dynamic manipulation you should have a deep look on jQuery:

$('body').append(button);
or
$('body').html(button);

Upvotes: 0

Related Questions