Question

我想在一个循环中创建Buttons，这取决于它创建x按钮所具有的值，一开始我试图通过Javascript创建一个Button。具有该功能的按钮必须在一个按钮中，但它创建的按钮必须在另一个按钮中创建。

我如何完成这项工作？

我的想法，如下所示，不起作用。

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

感谢Adrian

Answer 1

以下是创建按钮的代码：

＆＃13;

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);
}

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

我认为问题出在您声明按钮变量的位置。

应该是：

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

而不是：

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

将Button添加到特定div

2 个答案: