Нажатие кнопки в функции

Question

Я пытаюсь решить эту проблему. Первый шаг - создать таблицу после нажатия на первую кнопку. Позже создается таблица, и в одной строке есть другая кнопка, которая должна запускать другую функцию play () с аргументами. Для этого примера я просто хочу отобразить готово в консоли, но это не определено. Когда я вызываю эту функцию просто console.log вне функции, она работает правильно. Что плохого в вызове функции воспроизведения по кнопке?

<table class="table">
  <tr>
            <th>Team A</th>
            <th>Team B</th>
            <th></th>
        </tr>
</table>
  <button onclick="create()">Create next Match</button>

const table = document.querySelector('.table');

const teams=[{
  name: 'Real',
  point: 10
},
            {
  name: 'Barca',
  point: 20
}]

function create(){
  table.innerHTML += `
<tr id="r1m1">
            <td id="host">${teams[0].name}</td>
            <td id="guest">${teams[1].name}</td>
            <td id="host_score"></td>
            <td id="guest_score"></td>
            <td><button onclick="play(${teams[0]},${teams[1]})">Play</button></td> 
        </tr>`
}

function play(a,b){
  console.log("ready");
}

console.log(play(teams[0],teams[1]))

Answer 1

Вы объединяете строки, поэтому teams[0] преобразуется в [object Object], который не только не содержит требуемых данных, но и не является синтаксически действительным JavaScript.

Возможно, вы быть в состоянии справиться с onclick="play(teams[0],teams[1])", но объем может сбить вас с толку (так как teams и play должны быть глобальными, которых лучше избегать в общем).

В общем, Вы должны использовать методы DOM, такие как createElement, addEventListener и appendChild.

Answer 2

Не используйте подстановку шаблонов, просто обращайтесь к переменным непосредственно в onclick, точно так же, как когда вы вызываете play() в коде верхнего уровня.

function create(){
  table.innerHTML += `
<tr id="r1m1">
    <td id="host">${teams[0].name}</td>
    <td id="guest">${teams[1].name}</td>
    <td id="host_score"></td>
    <td id="guest_score"></td>
    <td><button onclick="play(teams[0],teams[1])">Play</button></td> 
</tr>`
}