Solution 1 :

As far as I get your question, the one of answer may be this one:-
You can put EventListener on Category button(id: dropDownButton) instead of dropdown options.

Solution 2 :

A typo from innerHTMl to innerHTML in the Javascript so it should be
document.getElementById("dropDownButton").innerHTML = "Acceptance Rate";

Solution 3 :

    <script>
      let e = document.getElementById("acceptanceRateButton");

      document.addEventListener("click", function () {
        selection = "acceptanceRate";
        document.getElementById("dropDownButton").innerHTML = "acceptanceRate";
      });
    </script>```

you have to write document.addEventListener , not e.document.addEventListener, also it is innerHTML not innerHTMl

Problem :

I have this drop down that is written in Bootstrap CSS and I want to make a JavaScript function to change the title of the button. For example right now the button is titled “Category” but when a dropdown selection is clicked I want it to say that value such as like “Acceptance Rate”. I have viewed other posts that have solved this problem in jQuery but I want to know how to do it in JavaScript, Thank you.

I have tried

JavaScript

document.getElementById("dropDownButton").innerHTMl = "acceptanceRate";

This does not work please give correct way to change the title in JavaScript.

My Dropdown written in Bootstrap

let e = document.getElementById("acceptanceRateButton");

e.addEventListener("click",function(){
  selection = "acceptanceRate";
  /*
  Code to change title here.
  */
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
  <div class="dropdown">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" id = "dropDownButton">
        Category
      </button>
      <div class="dropdown-menu">
        <a id = "acceptanceRateButton" class="dropdown-item" value ="Acceptance Rate">Acceptance Rate</a>
        <a id = "studentSizeButton" class="dropdown-item"  value ="Student Size">Student Size</a>
        <a id = "staffSizeButton" class="dropdown-item" value = "Staff Size">Staff Size</a>
      </div>
    </div>
    

Thank you

Comments

Comment posted by aksappy

innerHTMl

Comment posted by KhushThakor

Thanks for helping but my problem was what @aksappy said “innerHTMl !== innerHTML” simple typo that through out my whole program.

By