input value returns null

Question

HTML:

    <div class="form-group">
      <input class="input-sol form-control" id="focusedInput appendedInput sol" placeholder="Enter number" type="text" required>
      <button class="btn btn-warning btn-large" id="submit" type="button" onClick="getUserChoice()">Get Images</button>
    </div>

JavaScript:

    function getUserChoice() {
      var user_sol = document.getElementById("sol").value;

...

When I enter a value and click the button, my function is triggered but in console I get the following error:

    Uncaught TypeError: Cannot read property 'value' of null
      at getUserChoice (index.js:44)
      at HTMLButtonElement.onclick (index.html:53)

The other values selected from a drop-down list are fine but not for this input.

I guess you can't have three ids ? focusedInput appendedInput sol ? — Ioan
– Ioan, Commented Jan 12, 2018 at 19:23
The input's id isn't "sol" (and is, in fact, invalid). You may be confusing the id attribute with the class attribute, which can have multiple values separated by spaces. w3.org/TR/html5/dom.html#element-attrdef-global-id — Dave Newton
– Dave Newton, Commented Jan 12, 2018 at 19:24

Tom O. · Accepted Answer · 2018-01-12 19:26:24Z

2

function getUserChoice() {
  var user_sol = document.getElementById("sol").value;
  console.log(user_sol);
}

<div class="form-group">
  <input id="sol" class="input-sol form-control" placeholder="Enter number" type="text" required>
  <button class="btn btn-warning btn-large" id="submit" type="button" onClick="getUserChoice()">Get Images</button>
</div>

As mentioned in the comments, your problem is that you have an invalid ID attribute. You can only have 1 ID per element and it must be unique. Read this: https://www.w3schools.com/tags/att_global_id.asp

As you can see, you code works by simply fixing the ID attribute.

answered Jan 12, 2018 at 19:26

Tom O.

5,9813 gold badges24 silver badges36 bronze badges

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

1 Comment

Kathy Over a year ago

You are right! I forgot that you cannot have multiple ids.

Tornike Shavishvili · Accepted Answer · 2018-01-12 19:29:12Z

1

please see following answer Can an html element have multiple ids?

You can not have multiple id-s on an html element. The input's id isn't "sol" and that's why document.getElementById("sol") returns null.

answered Jan 12, 2018 at 19:29

Tornike Shavishvili

1,3546 gold badges20 silver badges41 bronze badges

Comments

Quentin · Accepted Answer · 2018-01-12 19:26:02Z

0

The class attribute accepts a list of space-separated class names. Classes are designed to represent groups, and elements can be members of multiple groups.

An id is a unique identifier, like a social security number. An element can only have one, and no element can share that of another.

focusedInput and appendedInput sound more like classes than ids. Move them to the class attribute.

answered Jan 12, 2018 at 19:26

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

Collectives™ on Stack Overflow

input value returns null

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related