CODEWITHSUNDEEP
javascripthtmlformselement
Phil_Driscle
Phil_Driscle

Reputation: 51

HTML Option Not Appending

I am experimenting with bootstrap and building an HTML form with some javaScript. I've tried to strip down my issue for simplicity (in other words, I realize this seems like a useless form).

I'm basically trying to use javaScript to update the form's second item with a drop down selection (just one selection option for proof of concept). I'm using a click event just to test. If I were to hard code in selections such as: <option>first selection</option> it works as expected.

I can see the click event is registering as it does update the first parameter, but it's not doing anything to the drop down menu. On W3schools it completes with the no visible change to the selection box while the Snipit on StackOverflow creates a load of errors that indicate it doesn't recognize getElementID (which seems strange since it DOES seem to recognize it to correctly address the first line of the click event).

Anyway... help appreciated and I'll be sure to accept. I"m sure I'm just doing something obviously wrong as I'm still pretty new at this.

function afterButtonClicked() {
  //this works and is just to confirm my listener is done correctly (I think)
  var tEntry = document.getElementById("test_entry");
  tEntry.value = "successfully clicked at " + new Date();

  //this doesn't seem to do anything.
  //I am expecting my drop down to now have the option "first selection"
  var item = document.getElementbyId("my_selection");
  var myOption1 = document.createElement("OPTION");
  myOption.textContent = "first selection";
  item.appendChild(myOption);
}

document.getElementById("aButton").addEventListener("click", afterButtonClicked);
<!doctype html>
<html lang="en">

<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

</head>

<body>

<div class="container">

    <div>
      <div class="form-group">
        <label for="test_entry">This box works okay</label>
        <input type="text" class="form-control" id="test_entry">
      </div>


      <div class="form-group">
        <label for="my_selection">I am trying to populate this drop down after a click</label>
        <select class="form-control" id="my_selection">
        </select>

      </div>
      <button class="btn btn-primary" id="aButton">Create Some Drop Down Options</button>

    </div>

  </div>
</body>

</html>

I'm sure this is something easy. I'll be sure to accept an answer for whoever points out my wayward ways.

Upvotes: 0

Views: 43

Answers (1)

Unbranded Manchester
Unbranded Manchester

Reputation: 1000

You had two errors in your JS

Its getElementById and myOption1 should be myOption 

function afterButtonClicked() {

  //this works and is just to confirm my listener is done correctly (I think)
  var tEntry = document.getElementById("test_entry");
  tEntry.value = "successfully clicked at " + new Date();

  //this doesn't seem to do anything.
  //I am expecting my drop down to now have the option "first selection"
  var item = document.getElementById("my_selection");
  var myOption = document.createElement("OPTION");
  myOption.textContent = "first selection";
  item.appendChild(myOption);
}

document.getElementById("aButton").addEventListener("click", afterButtonClicked);

Working fiddle : https://jsfiddle.net/wnxag1yz/

Upvotes: 1

Related Questions