用Js点击INNERHTML时交换两个按钮

Question

底部的图像从本地文件夹加载，按钮"值"；在数组中加载。我想在点击时交换2个按钮。我想点击ID"中的一个按钮；player_one_deck"；并通过点击ID"中的按钮进行交换；talon_card"；。我尝试在示例文档中使用.getElementbyId("talon_card"(.getElementbyId(以前单击按钮ID(.innerHTML，但没有成功。如果我想使用deck数组在innerHTML中加载卡片的名称，它显示了类似于左手错误的东西，现在是未定义的(读取"name"(。

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 swap 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>

Answer 1

这是代码的可复制版本。你说的"；我是怎么看到那里的纽扣的"？您正在替换按钮内部的内容，而不是按钮本身。

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>