Swap two buttons INNERHTML on click with Js

The images for the bottoms are loaded from the local folder,the buttons “values” are loaded in an array. I want to swap 2 buttons on click. I want to click on a button from the ID “player_one_deck” and swap by clicking on a button from ID “talon_card”.
I tried using in my example document.getElementbyId(“talon_card”).getElementbyId(previously click button ID).innerHTML and didn’t worked.
It showed something like left-handed error, and now undefined (reading ‘name’) if I want to use the deck array to load the name of the card in the innerHTML.

const value = [1, 2, 3, 4, 5, 6, 7, 8];
const suits = ["zold", "sarga", "piros", "makk"];
class Card {
    constructor(value, suits) {
        this.suit = suits;
        this.value = value;
        this.name = String(suits + value);
    }
}
const deck = new Array();

function swap() {
    $(".box_talon button").click(function () {
        var g = document.getElementById('talon_card');
        for (var i = 0, len = g.children.length; i < len; i++) {
            (function (index) {
                g.children[i].onclick = function () {
                    index_talon = index;
                }
            })(i);
        }
        this.innerHTML = "<img src="../images/kartyak/" + deck[index_button].name + ".jpg"/>";
        document.getElementById("one").innerHTML= "<img src="../images/kartyak/" + deck[index_talon].name + ".jpg"/>"; //how I saw the buttons here???
    })
}

function clicked_button_index() {

    var g = document.getElementById('player_one_deck');
    for (var i = 0, len = g.children.length; i < len; i++) {
        (function (index) {
            g.children[i].onclick = function () {
                index_button = index;
            }
        })(i);
    }
}

function getDeck() {
    for (let i = 0; i < suits.length; i++) {
        for (let x = 0; x < value.length; x++) {
            let card = new Card(value[x], suits[i]);
            deck.push(card);
        }
    }
    return deck;
}

clicked_button_index();
swap();

window.onload = function () {
    getDeck();
}
<div id="talon_card">
    <button class="card"></button>
    <button class="card"></button>
</div>
<div class="box_player" id="player_one_deck">
    <button class="card" id="one"></button>
    <button class="card" id="two"></button>
    <button class="card" id="three"></button>
    <button class="card" id="four"></button>
    <button class="card" id="five"></button>
    <button class="card" id="six"></button>
    <button class="card" id="seven"></button>
    <button class="card" id="eight"></button>
    <button class="card" id="nine"></button>
    <button class="card" id="ten"></button>
</div>