Метка кнопки равна ее идентификатору

Question

Можно ли сделать метку кнопки такой же, как ее идентификатор? Это спасло бы некоторую работу. Название продуктов и идентификатор совпадают. Итак, можно ли сделать кнопку, используя только идентификатор с чем-то вроде {{this.id}} ??

            <button type="button" id="Products" class="btn btn-link">
              Products
            </button>

Answer 1

Попробуйте эту функцию, используя ванильный JavaScript:

function fillButtonLabel(buttonId) {
    var button = document.getElementById(buttonId);
    button.innerHTML = button.id;
}

https://jsfiddle.net/nbk3hzqp/1/

Answer 2

Это не похоже на то, что действительно сэкономило бы вам много работы, но вы могли бы сделать это, используя Javascript.

const buttons = document.getElementsByTagName('button');
for (let i = 0; i < buttons.length; i++) {
    buttons[i].innerHTML = buttons[i].id;
}

<button id="hello-world"></button>
<button id="hello-other-world"></button>
<button id="hello-another-world"></button>
<button id="bye-world"></button>

Получите все кнопки на странице, для каждой кнопки, чтобы внутренний HTML принял значение идентификатора. Вы можете отредактировать его, чтобы удалить тире, использовать заглавные буквы или изменить, как вы хотите.