Hey)
So i’m trying to make a mdbootstrap dropdown with Handlebars implementation. I have to set each of the options to a new user from the data base and then, when I click it, the picked user should go into the Html of the button. I have this so far:
Html:
<div class="dropdown" style="width: fit-content;">
<button class="btn btn-secondary dropdown-toggle d-flex" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
User list
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
{{#each customers}}
<li>
<a class="dropdown-item" id={{guid}} onclick="show({{guid}})">
<div id="product" class="unhidden">
<div class="userIcon"></div>
<div class="d-flex flex-column align-items-start">
<span>{{customer_name}}</span>
<span>({{person_name}})</span>
</div>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
js:
function show(div_id) {
if(document.getElementById(div_id) != null){
var element = document.getElementById(div_id).innerHtml;
}
document.getElementById('dropdownMenuButton1').innerHtml == element;
}
The whole thing works perfectly fine if I manually set the IDs of the “dropdown-item” with different users, but when I start dynamically set IDs to the ones that come with users’ info from backend, I start getting Null/Undefined in the innerHtml of “dropdown-item”.
Would there be any obvious way to fix this that I just can’t notice?
Thanks.