Menu
I have an input element of type text with id "msg". I click the button to get value of above input element. First time I succeed. After change the value of above input element from 10 to 13, click the button again, this time I fail in get modified value by D3. Why? My html file is as follows:
<!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>
910
The value attribute is the default value, you need to access the value property
So, change this...
d3.select("#d3").html("D3:"+d3.select("#msg").attr("value"));
to this...
d3.select("#d3").text("D3:"+d3.select("#msg").property("value"));
or this...
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
