Использование переменных в onclick (сохранить старое значение переменной, даже если оно будет изменено позже)

Question

У меня проблема, когда мне нужно динамически добавлять события onclick в javascript кнопки, используя переменные, которые дает пользователь. Проблема : Эти переменные изменятся, но я не хочу, чтобы все события onclick менялись !! ненужные части и поэтому выглядит немного глупо).

ПРИМЕЧАНИЕ: Я попытался клонировать переменную, используя эти:

1) clone = Object.assign({}, old);

2) clone = JSON.parse(JSON.stringify(old);

Ни один из них не работал

Вот код: https://codepen.io/samuel-solomon/pen/ExPqdpM

HTML:

<div id="1"></div>

CSS

button {
  width: 50px;
  height: 50px;
}

.blue{background-color: blue;}
.black{background-color: black;}

Javascript

btn1 = document.createElement('button');
var one_class = "button black";
btn1.className = one_class;
btn1.addEventListener('click', function() {btn1.className = one_class;})
add_first = document.getElementById('1');
add_first.appendChild(btn1).html;
one_class = "button blue"

Answer 1

Вы можете использовать Function#bind для обозначения определенного c значения в качестве первого параметра обработчика событий. Это будет работать, поскольку one_class является строковым примитивом.

btn1.addEventListener('click', function(cls, event) {
       btn1.className = cls;
}.bind(null, one_class));