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.

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.

• javascript
• html

• 1 I guess you can't have three ids ? focusedInput appendedInput sol ? – 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/TR/html5/dom.html#element-attrdef-global-id – Dave Newton Commented Jan 12, 2018 at 19:24
• You are right! I forgot that you cannot have multiple ids. – Kathy Commented Jan 12, 2018 at 21:04

3 Answers 3

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 ments, 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./tags/att_global_id.asp

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

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.

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.