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?

LeeLenalee · Accepted Answer · 2021-07-29 23:16:08Z

1

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

answered Jul 29, 2021 at 23:16

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Saving value from HTML form to use in d3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related