関数のreturnをhtmlで出力

Question

前提・実現したいこと

クリックされるたびにtableのtdに１、２、３...と数字が１ずつ増加して表示されるようにしたいです。

コードはその一部で、クリックをする部分などは正常に動いてるので省略しており、上手くいかない箇所を記載しています。

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

クリックをすると、
td.innerHTML = plus1;
の部分に関数のreturnではなく、
function plus1(){
push_btn++;
return push_btn;
}
というコードが丸々表示されてしまいます。

どこをどのように書き換えれば1つめの td.innerHTML に数字が1、２、３...と表示されるようになるのでしょうか？

該当のソースコード

  var push_btn = 0;
  function plus1(){
    push_btn++;
    return push_btn;
  }

  function create_table(result){
    for (var j = 0; j < 1; j++){
      var td = document.createElement('td');
      //ここで実行するたびにtdに１、２、３...と表示されるようにしたい
      td.innerHTML = plus1;
      tr.appendChild(td);
    }
    for (j = 0; j < 1; j++){
      var td = document.createElement('td');
      td.innerHTML = result;
      tr.appendChild(td);
    }
  }

試したこと

innerHTMLでは関数のreturnを表示できないのかと思い、他の方法を探したのですが見つけられませんでした。

Answer 1

// td.innerHTML = plus1;
//                     ↓
   td.innerHTML = plus1();

Comments

[退会済みユーザー]

ありがとうございます。

表示されたのですが、変数を0と初期化しているので何回押しても１しか表示されませんでした。

addEventListener のクリックを使用しており、1つずつ増やすには前回の数字を毎回取得する必要があると思うのですが、createElement で生成したtdに入る数値をどのように取得すればいいか、ヒントをいただけないでしょうか？

[kei344]

https://jsfiddle.net/e4v2f19d/
そもそも「何回押しても」というコードが書かれていませんが、それの問題なのでは。

[退会済みユーザー]

すみません理解ができなかったのですが、何回押しても1,2,3...ではなく、1,1,1...と表示されるということが言いたかったことです。

貼ってくださったリンク先のdivをtableのtdなどに直し、そのまま書いても1,1,1...なのですが、「何回押してもというコード」というのが理解できなかったです、すみません。

[退会済みユーザー]

連続で失礼いたします。

解決いたしました。

var push_btn = 0;
をaddEventListener の外で定義して思い通りに動きました。

コードをきちんと載せず、私の言葉が足りていなかったのが原因かと思います。

丁寧に説明してくださり、ありがとうございました。