gpt4 book ai didi

d3.js - 如何使用 d3 获取输入元素的动态值?

转载 作者:行者123 更新时间:2023-12-03 02:33:32 27 4
gpt4 key购买 nike

我有一个文本类型的输入元素,id 为“msg”。我单击按钮来获取上述输入元素的值。我第一次成功。将上面输入元素的值从10更改为13后,再次单击按钮,这次我无法通过D3获取修改的值。为什么?我的html文件如下:

    <!DOCTYPE html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"> </script>

<script>
function getMessage() {
d3.select("#d3").html("D3:"+d3.select("#msg").attr("value"));
document.getElementById("dom").innerHTML = "DOM:" + document.getElementById("msg").value;
}
</script>
</head>
<body>
<p>
<form>
<input type="text" value="10" id="msg" >
</form>
</p>
<p>
<button onclick="getMessage()">Get Message</button>
</p>
<p id="d3">

</p>

<p id="dom">
</p>
</body>
</html>

最佳答案

value 属性是默认值,您需要访问value 属性
所以,改变这个......

d3.select("#d3").html("D3:"+d3.select("#msg").attr("value"));  

对此...

d3.select("#d3").text("D3:"+d3.select("#msg").property("value"));  

或者这个...

d3.select("#d3").text("D3:"+d3.select("#msg").node().value);
<小时/>

工作代码

<head>
<meta charset="utf-8" />
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js">
</script>

<script>
function getMessage() {
d3.select("#d3").text("D3a:" + d3.select("#msg").property("value"));
d3.select("#d3node").text("D3b:" + d3.select("#msg").node().value);
document.getElementById("dom").innerHTML = "DOM:" + document.getElementById("msg").value;
}
</script>
</head>

<body>
<p>
<form>
<input type="text" value="10" id="msg">
</form>
</p>
<p>
<button onclick="getMessage()">Get Message</button>
</p>
<p id="d3">

</p>
<p id="d3node">

</p>

<p id="dom">
</p>
</body>

</html>

关于d3.js - 如何使用 d3 获取输入元素的动态值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31369347/

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