Почему Javascript передается элемент, а не идентификатор?

Question

Я хочу использовать функцию javascript для определения элемента раскрывающегося типа, который я буду использовать несколько раз во время создания страницы. Мой код определения выглядит следующим образом:

function getSingleColorDropdown(use_id, initial_text) {

    let list_id = "dropdownList_" + use_id;
    let text_id = "dropdownText_" + use_id;
    let menu_id = "dropdownMenu_" + use_id;

    html = "<div class='dropdown dropdown_inline'>\
                <button id='" + list_id + "' data-toggle='dropdown' \
                        class='btn btn-secondary dropdown-toggle dropdown_text_wrapper' \
                        type='button' aria-haspopup='true' aria-expanded='false'>\
                        \
                        <span id='" + text_id + "' class='dropdown_text'>" + initial_text + "</span>\
                        \
                </button>\
                \
                <div id='" + menu_id + "' class='dropdown-menu' \
                     aria-labelledby='" + list_id + "'>\
                     \
                     <button class='dropdown-item' type='button' value='red' \
                                    onclick='storeSingleColorDropdown(" + text_id + ", this.value)'>\
                            red\
                     </button>\
                     \
                     <button class='dropdown-item' type='button' value='yellow' \
                                    onclick='storeSingleColorDropdown(" + text_id + ", this.value)'>\
                            yellow\
                     </button>\
                     \
                </div>\
            \
            </div>"
            
    return html
}

function storeSingleColorDropdown(use_id, result) {
    console.log(use_id)
    console.log(use_id.id)
    console.log(result)
    document.getElementById(use_id).innerHTML = result;
}

Он работает отлично, за исключением случаев, когда я передаю text_id в onclick, вместо передачи идентификатора (который должен быть "dropdownText_" + use_id) он передает весь строка <span id='" + text_id + "' class='dropdown_text'>" + initial_text + "</span>. Я не могу понять, почему это так. Я пробовал разные способы передачи text_id, но это единственный способ, который «работает», потому что он передает что-то вместо того, чтобы сломаться.

Как я могу заставить его передать text_id соответствующим образом в onclick?

Answer 1

Давайте рассмотрим это как простой пример

storeSingleColorDropdown(" + text_id + ", this.value)

Это будет:

storeSingleColorDropdown(dropdownText_something, this.value)

Но вы хотите:

storeSingleColorDropdown('dropdownText_something', this.value)

Таким образом, вы можете исправьте это, выполнив:

storeSingleColorDropdown('" + text_id + "', this.value)

Я не проверял вышеизложенное, но думаю, что это может быть правильно. В любом случае, у вас есть время поговорить о нашем Господе и Спасителе шаблонных литералах ?