从 HTML 表单中保存值以在 d3 中使用

Question

我在尝试保存用户输入以进行 d3 计算时遇到了一些问题。我查看了一些主题，包括 JavaScript - Getting HTML form values，但出于某种原因，建议的解决方案似乎不适用于以下情况。

这是我的 HTML:

   <div class='row'>
        <div class="col-md-12">
            <p class="lead">
                What is your annual household income?
            </p>
            <input id="userAnnualIncome form-control-sm" type="number" value="">
        </div>
    </div>

这是我在 JS 中的内容：

let annualIncome = document.getElementById('userAnnualIncome').value

当我 console.log(annualIncome) - 我收到以下错误：

app.js:95 Uncaught TypeError: Cannot read property 'value' of null
at HTMLButtonElement.<anonymous> (app.js:95)
    at HTMLButtonElement.<anonymous> (d3.v7.min.js:2)

有什么建议吗？

Answer 1

这是因为您的 ID 是 userAnnualIncome form-control-sm，所以您尝试 select 一些不存在的东西。如果您将 bootstrap 部分放在 class 属性中，并且仅将 userAnnualIncome 作为 ID，它就可以正常工作

let val = document.getElementById('userAnnualIncome').value

console.log(val)

<input id="userAnnualIncome" class="form-control-sm" type="number" value="12123">

从 HTML 表单中保存值以在 d3 中使用

Saving value from HTML form to use in d3

javascript

d3.js