Adding Button to specific div

Question

I want to create Buttons in a loop, depending on a value it has to create x buttons, for the beginning I'm trying to get the creation of a Button via Javascript. th e button with the function has to be in one , but the button it creates has to be created in another .

How do I get this done?

My idea, shown below, does not work.

function createButton(context, func){
    var button = document.createElement("input");
    button.type = "button";
    button.value = "im a button";
    button.onclick = func;
    context.appendChild(button);
}

html,body { margin:0; padding: 0; }
#inputpanel {
  width: calc(40vw - 10px);
}
#selectpanel {
  width: calc(20vw - 10px);
}

#inputpanel,#selectpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}

<div id="inputpanel">
  
 <button type="button" id="createBut" onclick="createButton(document.selectpanel, function(){
    alert('it works');})">create Button</button>
</div>

<div id="selectpanel">
adsadasdasd<br />
asfdsdfsdfgdf

</div>

Thanks Adrian

document.selectpanel does not exist. Either pass a proper, existing element reference - or pass the element id as string only, so that you can then use getElementById inside your function to get the element. — C3roe
– C3roe, Commented Jul 12, 2017 at 11:54

Milan Chheda · Accepted Answer · 2017-07-12 11:55:59Z

2

Here is the code to create buttons:

function createButton(context, func) {
  var button = document.createElement("input");
  button.type = "button";
  button.value = "im a button";
  button.onclick = func;

  var selectPanel = document.getElementById('selectpanel');
  selectPanel.appendChild(button);
}

html,
body {
  margin: 0;
  padding: 0;
}

#inputpanel {
  width: calc(40vw - 10px);
}

#selectpanel {
  width: calc(20vw - 10px);
}

#inputpanel,
#selectpanel {
  display: inline-block;
  box-sizing: border-box;
  height: calc(100vh - 200px);
  margin: 0;
  padding: 0;
}

<div id="inputpanel">

  <button type="button" id="createBut" onclick="createButton(document.selectpanel, function(){
    alert('it works');})">create Button</button>
</div>

<div id="selectpanel">
</div>

answered Jul 12, 2017 at 11:55

Milan Chheda

8,2593 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Lars Peterson · Accepted Answer · 2017-07-12 11:56:35Z

0

I think the problem is located where you are declaring the button variable.

It should be:

var button = document.createElement('input');

Instead of:

var button = document.selectpanel.createElement('input');

answered Jul 12, 2017 at 11:56

Lars Peterson

1,5321 gold badge12 silver badges27 bronze badges

1 Comment

AdrianL Over a year ago

yeah that was not intented, i fixed it.

Collectives™ on Stack Overflow

Adding Button to specific div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related