score:20

Accepted answer

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);

Working code

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


Related Query