logo标签列表

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

d3.js
11

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

为什么呢...发表你的代码。 - Cool Blue
你能发布一下你写的代码，并创建一个JSFiddle吗？这会很有帮助的。 - whatoncewaslost
1个回答
21

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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接