テーブルの空のセルを押した時にパネルが出現して、そのパネルの数値を押すとその値がセルに入るようにしたいです。

Question

テーブルの空のセルを押した時にパネルが出現して、そのパネルの数値を押すとその値がセルに入るようにしたいです。

Dは数値を空にします。

数値が始めから入っている所は、押しても反応しないようにします。

下記のようにしてもうまくいきません。
https://codepen.io/anon/pen/QJWGqb#anon-signup

よくわからないのがイベントリスナーで、始めに登録したものは、処理が終わってページが開ききった時点でも残り続けているのかと、
一度セルをクリックしてから、その要素に値を入れるようにして、パネルのボタンを押した値を取得代入するあたりです。

繰り返処理をどのように入れ子にするのかがよくわかりません。

Comments

[x_x]

Dというのは何のことでしょうか？

[退会済みユーザー]

codepenを見てもらうとあるようにデリート用のボタンをD×としています。

[akihiro3]

解決してないならここでもう一度そう言うべきではないですか？既に回答もらったのと同じ回答をしてもらったら何て返事するつもりですか？それと、解決しない場合は毎回新しく同じ質問をするつもりですか？極端な例ですが100人回答があって、100回解決しなかったら何ページもあなたの質問ばかりになるのですか？

Answer 1

解決しないので再質問します

Answer 2

<!-- tableは省略 -->
<dialog>
 <form method="dialog">
  <div>
   <button type="submit" value="">D</button>
   <button type="submit" value="0">0</button>
   <button type="submit" value="1">1</button>
   <button type="submit" value="2">2</button>
   <button type="submit" value="3">3</button>
   <button type="submit" value="4">4</button>
   <button type="submit" value="5">5</button>
   <button type="submit" value="6">6</button>
   <button type="submit" value="7">7</button>
   <button type="submit" value="8">8</button>
   <button type="submit" value="9">9</button>
  </div>
 </form>
</dialog>

function showModalDialog(dialog) {
  return new Promise(resolve => {
    dialog.addEventListener('close', event => {
      resolve(event.target.returnValue);
    }, { once: true, passive: true, capture: false });
    dialog.showModal();
  });
}

const modal = document.querySelector('dialog');
document.querySelector('table').addEventListener('click', function(event) {
  const target = event.target;
  if (target.tagName.toLowerCase() === 'td' && target.textContent === '') {
    showModalDialog(modal).then(value => {
      target.textContent = value;
    });
  }
}, false);

Comments

[退会済みユーザー]

https://codepen.io/anon/pen/yQyKeg