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 1 :
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.