Saving value from HTML form to use in d3

Question

I'm having some issues whilst trying to save a user's input for a d3 calculation. I've looked at few threads, including JavaScript - Getting HTML form values but the suggested solutions don't seem to work in the case below for some reason.

Here's my 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>

And here's what I had in JS:

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

When I console.log(annualIncome) - I get the following error:

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)

Any advice?

score 1 · Accepted Answer · answered Jul 29 '21 at 23:16

This is because your ID is userAnnualIncome form-control-sm so you try to select something that doesnt exist. If you put the bootstrap part in the class attribute and only the userAnnualIncome as ID it works just fine

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

console.log(val)

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

Saving value from HTML form to use in d3

1 Answers1