Создать кнопку с атрибутом onClick и параметром в кавычках

Question

Когда приведенный ниже код создает кнопку, я хочу, чтобы у него был атрибут addEvent ('введенный текст здесь'), но он создает атрибут как addEvent (введенный текст здесь)

let eventList = [];

function btnCreateEventClicked() {
    var event = document.getElementById("event").value;
    function createBtn(evt){
        var btn = document.createElement('button');
          btn.innerHTML = evt;
          btn.setAttribute('class', "evt-btn");
          
          btn.setAttribute('onClick', `addEvent(${evt})`);
    document.getElementById("event_btns").appendChild(btn);
    }
    createBtn(event);
    document.getElementById("event").value = '';
    
}


function addEvent(evt){
    eventList.push(evt);
    console.log(eventList);
}

<div id="Input">    
<label>Create an Event: </label><input type="text" id="event">
<button type="button" id="add-event-btn" onclick="btnCreateEventClicked()">Create</button>
<div id="event_btns">

</div>

Answer 1

Вам нужна функция onClick внутри элемента create. setAttribute будет не работать и будет ошибкой. Хорошо иметь меньше кода для достижения тех же результатов.

Вы можете сделать все это в функции one вместо создания two функции.

Также вместо использования setAttribute для установки class просто используйте classList и add, чтобы назначить класс вашему динамически добавляемому элементу.

Демо:

let eventList = [];

//Buttons
var eventBtn = document.getElementById("event_btns")

function btnCreateEventClicked() {
  var event = document.getElementById("event").value;
  var btn = document.createElement('button');
  btn.innerHTML = event;
  btn.classList.add("evt-btn"); //use classList.add()
  btn.onclick = function() { //function
    addEvent(event); //call function pass the evt
  };
  //Appned buttons 
  eventBtn.appendChild(btn);
  //Clear input
  document.getElementById("event").value = ''
}

function addEvent(evt) {
  eventList.push(evt);
  console.log(eventList);
}

<div id="Input">
  <label>Create an Event: </label><input type="text" id="event">
  <button type="button" id="add-event-btn" onclick="btnCreateEventClicked()">Create</button>
  <div id="event_btns">
  </div>
</div>

Answer 2

добавить кавычки между $ {evt}

btn.setAttribute('onClick', `addEvent("${evt}"`));