Handlebars returns Undefined/Null

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:

<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
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
            {{#each customers}}
                    <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">


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?

Should your ID attribute for the anchor here

 <a class="dropdown-item" id={{guid}} onclick="show({{guid}})">

not be enclosed in double-quotes, like so:

 <a class="dropdown-item" id="{{guid}}" onclick="show({{guid}})">

This topic was automatically closed 41 days after the last reply. New replies are no longer allowed.