質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

Javascriptのonclickの引数が渡らない

hiro04kon
hiro04kon

総合スコア43

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

2回答

0グッド

0クリップ

551閲覧

投稿2022/12/08 09:00

やりたいこと

動的にボタンを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のデバックにて確認しながら作業していますが、調べても分かりません。
お知恵をお貸しください!

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

回答2

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)");

本来jsで処理するなら属性ではなくhtml要素にdatasetで付加したり
イベントならaddEventListenerするのがまっとうなやり方です

投稿2022/12/08 09:13

yambejp

総合スコア109059

spoofy_dragon, ams2020👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hiro04kon

2022/12/08 09:23

なるほど!tdにvalueを設定できないということ自体が、考えから抜けていました…。 ありがとうございます!

0

var btn_value = btn.value; //これがundefinedになってしまう。

<td>要素に無理やりvalueを追加しても、.valueからは取れません。どうしてもvalueで書きたいのであればgetAttributeで取得する必要があります。

投稿2022/12/08 09:02

maisumakun

総合スコア141482

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

hiro04kon

2022/12/08 09:24

getAttributeを使ってみます! ありがとうございます!

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。