Как грамотно использовать this в данном коде?
А лучше всего просто объяснить что бы я в итоге допер сам!
Объясняю: включаешь голову, думаешь, гуглишь, ещё думаешь, делаешь. Вот так всё просто.
Этот this действует, когда ты на кнопку вешаешь обработчик.
Вот ты его подвесил, вот внутри него он и действует.
onclick="alert(this.value);"
Иначе он не работает.
Ты можешь в javascript подвесить его, типо так
btn.onclick = function() {
alert(this.value);
}
Но если ты хочешь, чтобы пользователь нажал любую кнопку и тебе выводило value, да и при чем кнопки могут автоматически создаваться, тогда только класс назначать и через него делать что-то подобное.
let classlist = document.getElementsByClassName('myclass');
let classlength = classlist.length-1;
for (i=0; i<=classlength; i++) {
classlist[i].onclick = function(e) {
alert(this.value);
}
}

Что тут произошло.
1. Получаем список элементов.
2. Получаем количество элементов и отнимаем единицу, так как отсчет начинается с нуля, а значит последний пункт будет undefined
3. Запускаем цикл по всем элементам и назначаем им событие onclick
Ну а дальше выводим в alert value кнопки.

Надеюсь понятно объяснил.