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, Jan 12 '18 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. https://www.w3.org/TR/html5/dom.html#element-attrdef-global-id — Dave Newton, Jan 12 '18 at 19:24

score 2 · Answer 1 · answered Jan 12 '18 at 19:26

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.

You are right! I forgot that you cannot have multiple ids. – Kathy Jan 12 '18 at 21:06 — Kathy, Jan 12 '18 at 21:06

score 1 · Answer 2 · answered Jan 12 '18 at 19:29

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 '18 at 19:29

Tornike Shavishvili

1,244
4
16
35

score 0 · Answer 3 · answered Jan 12 '18 at 19:26

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.

input value returns null

3 Answers3