document.write()でHTMLの中に配列の中身を表示したい。

Question

前提・実現したいこと

javascriptのHTML書き換えについて
ここに質問の内容を詳しく書いてください。
javascriptでかんたんなポーカーゲームを作ろうとしています。

そこで、配列の中身をinnerHTMLで書き換えると同時に
foreachで展開した配列の中身を一つ一つ出していきたいのですが、
どうやってもHTMLのタグが全て消えてしまい、思うように動きません。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

document.write()で一つずつHTML内に入れていこうとすると
html内のタグが反応されず、配列の情報だげが表示される

該当のソースコード

const change = document.querySelector('#container')
const h1 = document.querySelector('h1')

h1.onclick = function(){
// h1をおすと実行する処理

let player1 = [];
let player2 = [];

// 配列の中にランダムで５つ数字を入れていく
for(let i = 0; i < 5 ; i++){
player1[i] = Math.floor(Math.random() * (53 - 0)) + 0
}
for(let j = 0; j < 5 ; j++){
player2[j] = Math.floor(Math.random() * (53 - 0)) + 0
}

// table
player1.forEach(function( value ){
document.write('<td><img src="tranp/'+value+'.png" width="200px"></td>');
});
player2.forEach(function( value ){
document.write('<td><img src="tranp/'+value+'.png" width="200px"></td>');
});

const html = `

<div id="top"> <table> <tr> ${player1} </tr> </table> </div> <div id="bottom"> <table> <tr> ${player2} </tr> </table> </div> `; console.log(html); change.innerHTML = html; }

試したこと

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

（質問文は編集できます）HTMLも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

const change = document.querySelector('#container')
const h1 = document.querySelector('h1')

h1.onclick = function(){
// h1をおすと実行する処理

let player1 = [];
let player2 = [];

// 配列の中にランダムで５つ数字を入れていく
for(let i = 0; i < 5 ; i++){
player1[i] = Math.floor(Math.random() * (53 - 0)) + 0
}
for(let j = 0; j < 5 ; j++){
player2[j] = Math.floor(Math.random() * (53 - 0)) + 0
}

// table
const array1 = [];
const array2 = [];

for(let a = 0; a < 5 ; a++){
array1[a] = '<td><img src="tranp/'+player1[a]+'.png" width="200px"></td>';
}
for(let b = 0; b < 5 ; b++){
array2[b] = '<td><img src="tranp/'+player2[b]+'.png" width="200px"></td>';
}

const html = `

<div id="top"> <table> <tr> ${array1} </tr> </table> </div> <div id="bottom"> <table> <tr> ${array2} </tr> </table> </div> `; console.log(html); change.innerHTML = html;

}