我有一个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>