Javascriptのonclickの引数が渡らない

やりたいこと

動的にボタンをjavascriptで作成し、クリックしたら以下のような動作をさせたい。
クリックしやすいように、テーブル全体をボタンとしています。(表現があってるかは分かりません…）
・テキストを書き換える
・再クリック不可にする
（現段階では、Valueの値を”OK"か”NO"で、条件分けしようとしています。）

発生している問題

クリックして、それぞれのボタンのidとvalueを取得して、あれこれしたいのですが、
id以外の様子が undefined になってしまいます。
また、クリックするとテーブルの高さが変わるのもなんとかしたい…　（文字は多くないのに…）

該当のソースコード

html
1<!doctype html>
2<html lang="en">
3
4<head>
5	<meta content="text/html; charset=Shift_JIS" http-equiv="content-type">
6	<title>ボタンクリック</title>
7	<link rel="stylesheet" type="text/css" href="sample.css">
8	<script type="text/javascript" src="button.js"></script>
9	<script src="sample copy.js"></script>
10</head>
11
12<body>
13	<table id='data-table' class="mainTable" style="text-align: center; " border="2" cellpadding="0" cellspacing="1">
14	</table>
15
16</body>
17</html>
18

javascript
1document.addEventListener('DOMContentLoaded', function () {
2	var tableEle = document.getElementById('data-table');
3
4	yoko = 6    //ここは変数であとから変更します。
5	tate = 5
6
7	for (var i = 0; i < tate; i++) {
8		// テーブルに行を追加
9		var tr = document.createElement('tr');
10		for (var j = 0; j < yoko; j++) {
11			// テーブルに列を行追加
12			var td = document.createElement('td');
13			//付与するid名
14			var val=(i + 1) + "-" + (j + 1) + "_t";
15			//id属性追加
16			td.setAttribute("id",val);
17			td.setAttribute("class","btn btn--orange");
18			td.setAttribute("value","ok");        //クッリクOKの意味、これをクリックしたらNOにする。
19			td.setAttribute("onclick","btnclick(this)");
20			td.innerText = 'データ' + (i + 1) + "-" + (j + 1) ;
21			tr.appendChild(td);
22		}
23		tableEle.appendChild(tr);
24	}
25	tableEle.appendChild(tr);
26}, false);
27
28
29function btnclick(btn) {
30	var btn_id = btn.id;
31	var btn_value = btn.value;　//これがundefinedになってしまう。
32	let text = document.getElementById(btn_id).textContent; 
33	var now = new Date();
34	var Month = now.getMonth()+1;
35	var DateA = now.getDate();
36	var Hour = now.getHours();
37	var Min = now.getMinutes();
38	var Sec = now.getSeconds();
39	var time = Month + '/' + DateA +' ' + Hour + ':' + Min // + ':' +Sec
40	let td_new = document.getElementById(btn_id)
41	let text2 = text + '<br>' + time + '<br>済み';
42	td_new.style.fontSize = "small";
43	td_new.innerHTML = text2;
44	td_new.setAttribute("class","btn btn--gray");
45	td_new.setAttribute("value","NO");
46  };

CSS
1*,
2*:before,
3*:after {
4	-webkit-box-sizing: inherit;
5	box-sizing: inherit;
6}
7
8html {
9	-webkit-box-sizing: border-box;
10	box-sizing: border-box;
11	font-size: 62.5%;
12}
13
14.mainTable {
15	width: 97vw;
16	height: 97vh;
17	display: table;
18	table-layout: fixed;
19	background-color: #3e4274;
20	border-radius: 1rem;
21}
22
23.btn,
24a.btn,
25button.btn {
26	font-size: 1.6rem;
27	font-weight: 700;
28	line-height: 1.5;
29	position: relative;
30	/* display: inline-block; */
31	padding: 1rem 1rem;
32	cursor: pointer;
33	-webkit-user-select: none;
34	-moz-user-select: none;
35	-ms-user-select: none;
36	user-select: none;
37	-webkit-transition: all 0.3s;
38	transition: all 0.3s;
39	text-align: center;
40	vertical-align: middle;
41	text-decoration: none;
42	/* letter-spacing: 0.1em; */
43	color: #212529;
44	border-radius: 3rem;
45}
46
47.btn--orange,
48a.btn--orange {
49	color: #fff;
50	background-color: #ff8a37;
51}
52
53.btn--orange:hover,
54a.btn--orange:hover {
55	color: #fff;
56	background: #3916ff;
57}
58
59.btn--gray,
60a.btn--gray {
61	color: #fff;
62	background-color: #4e4e4e;
63}

試したこと

td.setAttribute("onclick","btnclick(this)");　を
td.setAttribute("onclick","btnclick(this.id, this.value)");

function btnclick(btn) { を
function btnclick(btn_id ,btn_value ) {
としましたが、btn_valueは渡せませんでした。

VScodeのデバックにて確認しながら作業していますが、調べても分かりません。
お知恵をお貸しください！

行動規範の内容に同意します

回答2件

ベストアンサー

valueは特殊な属性なのでtdに設定することはできませんし、設定しても参照が保証されていません
まずカスタムデータに変更して、datasetで参照させてください

javascript
1td.setAttribute("value","ok")
2td.setAttribute("onclick","btnclick(this,this.value)");
3↓↓↓
4td.setAttribute("data-value","ok")
5td.setAttribute("onclick","btnclick(this,this.dataset.value)");