Home>
I want to ask: When you click a button in JavaScript, a table is created and I want to display different contents for each td tag.

Currently, as a practice for implementing the Todo app, when you press a button, (1) the number of times the button was pressed (2) a button written as incomplete (3) a button written as deleted, I'm trying to implement a program that puts all three of these into td tags.

<! DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie = edge">
  <title>Document</title>
</head>
<body>
  <button>Increase</button>
   
  <script>
    let i = 1;
    let table = document.createElement ("table");
    table.setAttribute ("border", 1)
    document.body.appendChild (table);
    btn = document.querySelector ("button");
    btn.addEventListener ("click", increaseTbl);
    function increaseTbl () {
      let tr = document.createElement ("tr");
      table.appendChild (tr);
      for (let j = 0;j<3;j ++) {
        let td = document.createElement ("td");
        tr.appendChild (td);
        switch (j) {
          case 0:
            td.textContent = "<button>hoge</button>";
            console.log (i);
            td.setAttribute ("id", "cont" + i);
          case 1:
            td.innerHTML = "<button>Incomplete</button>";
            td.setAttribute ("id", "comp" + i);
            break;
          case 2:
            td.innerHTML = "<button>Delete</button>";
            td.setAttribute ("id", "del" + i);
        }
      }
      i ++;
    }
  </script>
</body>
</html>

I'm trying to insert the appropriate content for each of the three td using the switch inabove, butand id = "comp" + i are included. (The same content as the second td will be included.)

What is the cause of this?
Please teach someone.

  • Answer # 1

    Is it because there is nobreak?

    switch (j) {
              case 0:
                td.textContent = "";
                console.log (i);
                td.setAttribute ("id", "cont" + i);
                break;//<-I don't think there is no break here
              case 1:
                td.innerHTML = "";
                td.setAttribute ("id", "comp" + i);
                break;
              case 2:
                td.innerHTML = "";
                td.setAttribute ("id", "del" + i);
                break;//<-I think it's better to put a break here
            }

  • Answer # 2

    switch (j) {
              case 0:
                td.textContent = "";
                console.log (i);
                td.setAttribute ("id", "cont" + i);
                break;// ADD
              case 1:
                td.innerHTML = "";
                td.setAttribute ("id", "comp" + i);
                break;
              case 2:
                td.innerHTML = "";
                td.setAttribute ("id", "del" + i);
            }

    [switch-JavaScript | MDN]
    https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch

Related articles