javascriptのsetAttributeでのリンク設定について

Question

javascriptのsetAttributeについて質問です。

JSONで情報取得したデータの中に「変更」と「削除」のボタン2つあります。

それぞれのbuttonに
javascriptのsetAttributeで“onclick=”と“ページ内リンク（モーダル表示）”を設定したいのですが、うまくいかず困っています。

[HTML] ———————————————————————

<span>
  <button class="change" id="changeID">変更</button>
  <button class="delete" id="deleteID">削除</button>
</span>

————————————————————————————

[javascript] —————————————————————

body: function (ul, json) {
  $getJSON(json, function (data){
    data.forEach(function(v) {
      var li, spans, buttons;
      li = document.createElement('li');
      spans = makeSpans(v);
      spans.forEach(function (span) { li.appendChild(span); });
      buttons = document.createElement('span');
      Policy.const.button.forEach(function (val, i) {
        var button;
        button = document.createElement('button');
        button.className = i === 0 ? 'change' : 'delete';
        button.id = i === 0 ? 'changeID' : 'deleteID';

        button.onclick = function (e) {
          i === 0 ? ChangeEvent(e) : deleteEvent(e) ;
        };

        // button.setAttribute('onclick', 'location.href="#modal-chg01"');
        // button.setAttribute('onclick', 'location.href="#modal-del01"');

        button.textContent = val;
        buttons.appendChild(button);
      });

      const button =
      li.appendChild(buttons);
      ul.appendChild(li);
    });
  });
}

————————————————————————————

[HTML結果] —————————————————————

<span>
  <button class="change" id="changeID" onclick='location.href="#modal-del01"'>変更</button>
  <button class="delete" id="deleteID" onclick='location.href="#modal-del01"'>削除</button>
<span>

————————————————————————————

当たり前なのですがこの記述では、リンク先がどちらも#modal-del01” になってしまいます。

setAttributeで別々のリンク先設定にしたい場合どのように記述すればよいですか？

初心者ですので、わかりやすくご教示いただけますと、助かります。
よろしくお願いします。

Comments

[maisumakun]

buttonはどのように取得しているのですか？

[yambejp]

> JSONで情報取得したデータの中に「変更」と「削除」のボタン2つ

どうやってjsonを取得してHTMLにしているかによります

全角でかいているクォーテーションはNGです

[退会済みユーザー]

ダブルクォーテーションの文字が全角文字だけど、だいじょうぶ？ “”じゃなく""の方を使いますよ。

[july2022]

すみません。
どうやってjsonを取得してHTMLにしているか、というのは、どういうことですか？
どういった情報があればよいのでしょうか。
全角のダブルクォーテーションのご指摘、ありがとうございます。
メモに記述してしまったので、こんなことになってます。（元のデータは大丈夫です）
投稿の方、恥ずかしいので修正したいと思います。

[退会済みユーザー]

button.setAttribute() のbuttonが同じものに対して重ねるように実行している？ 実態のコードじゃなく手書きのメモの転記だと間違いやすいので、落ち着いて質問文を修正できる環境になってから直してください。中略としてすっ飛ばした箇所に問題があるかもしれないし。

[yambejp]

> どうやってjsonを取得してHTMLにしているか、というのは、どういうことですか？

jsonというからには外部ファイルですよね？
外部のファイルはなんらかの手続きを経て取り込まれます？
具体的に何をどうしているのかさっぱりわかりません

[yambejp]

結局JSONデータは
["変更","削除"]
なのでしょうか？

[july2022]

json: { sample: './data/sample.json'},
button: ['変更', '削除'],
です。

[yambejp]

> button: ['変更', '削除'],

はJSONとしては評価できません。

[july2022]

いろいろとご考慮いただきまして、ありがとうございます。
JSONとしては評価できないことなんですね。この点も考え直さなければいけないということですね。すると工数も考えないといけませんね。
2つのボタンは上記のソースで表示はされているので、あとはモーダル表示のページ内リンクの設定をjsで個別に付与したかっただけなのですが...。
buttonタグそのものには設定できるのですが、idやclassで個別設定分けしようとするとできない。
調べても2つのボタンにsetAttributeで設定分けする方法が見つからないため、こちらで質問させていただきました。
要再検討事案ということが分かりました。
いろいろとご苦心いただきまして、ありがとうございました。

Answer 1

//sample.json

"<span>\n<button class=\"change\" id=\"changeID\">変更</button>\n<button class=\"delete\" id=\"deleteID\">削除</button>\n</span>"

これをjsでよんでbottunにonclickを設定

fetch("sample.json").then(res=>res.json()).then(data=>{
  const tmp=document.createElement('template');
  tmp.insertAdjacentHTML("beforeend",data);
  tmp.querySelectorAll('button')[0].setAttribute("onclick",`location.href="#modal-chg01"`);
  tmp.querySelectorAll('button')[1].setAttribute("onclick",`location.href="#modal-del01"`);
  console.log(tmp.firstChild.outerHTML);
});

調整

//sample.json

{"button":["変更","削除"]}

<script>
window.addEventListener('DOMContentLoaded',async()=>{
  const data=await fetch('sample.json').then(res=>res.json()).then(x=>x.button);
  const ul=document.querySelector('ul');
  const li=document.createElement('li');
  const buttons = document.createElement('span');
  const attrs=[
    {className:'btn btn-warning change',id:'changeID',onclick:()=>location.hash="modal-chg01"},
    {className:'btn btn-info delete'   ,id:'deleteID',onclick:()=>location.hash="modal-del01"},
    ];
  data.forEach((x,y)=>{
    const opt={...attrs[y],textContent:x};
    const button = Object.assign(document.createElement('button'),opt);
    buttons.appendChild(button);
  });
  li.appendChild(buttons);
  ul.appendChild(li);
});
</script>
<ul></ul>

Comments

[july2022]

いろいろとご考慮いただきまして、ありがとうございます。感謝いたします。

Answer 2

button: ['変更', '削除'],

はJSONとしては評価できないことのようです。
といっても、2つのボタンは上記のソースで表示はされているので、あとはモーダル表示のページ内リンクの設定をjsで個別に付与したいだけだったのですが、簡単にはいかないようですので、どうするか再度検討したいと思います。
質問について、いろいろとご考慮の上、お答えいただきまして、ありがとうございました。

Comments

[yambejp]

ご自身が「JSON」と指定したのですから、ちゃんとしたJSONデータであることを検証してから命題に提示ください。基本がまちがっているとその後の処理がまったく無意味です。
すくなくとも「上記のソースで表示はされている」というのは間違いです。