Question

我正在尝试向div添加两个按钮，一个在另一个下面。第一个按钮接受一个数字，第二个按钮用于打开和关闭线路。

仅创建我追加的第二个按钮。如何在同一个div中创建两个按钮？

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<script src="d3.js"></script>
<body>
<div id=options>
<script>

(function(){
  var form = d3.select("#options")
      .append("form")
      .html("Enter a number:")

  form.append("input")
      .attr("type", "text")
      .attr("name", "num")

  form.append("input")
      .attr("type", "button")
      .attr("value", "Add")
      .attr("onclick", "printNum(num.value)")

  form.html("Show/hide lines:")    
      .append("input")
      .attr("type", "button")
      .attr("name", "toggle")
      .attr("value", "Toggle")
      .attr("onclick", "togglePressed()");
})();

function printNum(num){
  alert("You entered " + num + "!");
}

function togglePressed(){
  alert("You pressed the toggle button!");
}
</script>
</div>
</body>
</html>

Answer 1

问题是，在尝试将内容附加到表单后，您需要设置表单的html。换句话说，追加功能起作用，然后你销毁所有内容并将其换成.html函数中的内容。

在追加调用之前将此块移动到：

form.html("Show/hide lines:") .append("input") .attr("type", "button") .attr("name", "toggle") .attr("value", "Toggle") .attr("onclick", "togglePressed()");

或者，不要使用.html功能。

引用：＆＃34;设置内部HTML内容将替换任何现有的子元素＆＃34; https://github.com/mbostock/d3/wiki/Selections#html

更新了jsfiddle：http://jsfiddle.net/kueuLLr4/

如何使用D3.js向div添加两个按钮？

1 个答案: