gpt4 book ai didi

javascript - 如何使用 D3.js 将两个按钮添加到一个 div?

转载 作者:行者123 更新时间:2023-11-29 16:54:30 26 4
gpt4 key购买 nike

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

只创建了我附加的第二个按钮。如何在同一个 div 中创建两个按钮?

这是一个JSFiddle.

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

最佳答案

问题是您尝试将内容附加到表单后设置表单的html。所以换句话说,附加函数起作用,然后你销毁所有东西并将它换成你的 .html 函数中的内容。

要么将此 block 移动到附加调用之前:

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

或者,不要使用 .html 函数。

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

更新的 jsfiddle:http://jsfiddle.net/kueuLLr4/

关于javascript - 如何使用 D3.js 将两个按钮添加到一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33351320/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com