Question

我有一个带有id＆＃34; msg＆＃34;的文本类型的输入元素。我单击按钮获取上面输入元素的值。我第一次成功。将上面的输入元素的值从10更改为13后，再次单击该按钮，这次我失败了获得D3的修改值。为什么？我的html文件如下：

＆＃13;

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

＆＃13;

Answer 1

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

工作代码

＆＃13;

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

＆＃13;

如何用d3获取输入元素的动态值？

1 个答案:

工作代码