how to add css to table consistently-CodePudding

I made this simple website that adds and removes rows from a table. I have a two problems.The first one is whenever i add elements and them start deleting them my css style for my table is gone. Any idea how to fix it ? For example if i add 5rows and try to delete two of them then my style for all rows is gone. The second problem is how can i implement a function counter that will change the number of elements in the table and will keep track of them whenever someone removes or add new element. Here is my code:

var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");

function addToTable() {
  var radio = document.getElementsByName("content");
  var radio_selected;
  for (var a = 0; a < radio.length; a  ) {
    if (radio[a].checked) {
      radio_selected =

        radio[a].value;
    }
  }
  output.innerHTML  = "<tr>"   "<td>"   title.value   "</td>"  
    "<td>"   author.value   "</td>"  
    "<td>"   radio_selected   "</td>"  
    "<td>"   "<input type='button' onclick='post(this);' id='post' value='Post'>"  
    "<input type='button' onclick='remove(this);' id='remove'value='Remove'>"   "</td>"   "</tr>"
}

function counter() {
  var counter = document.getElementById("counterForElements");
  counter.innerHTML  = 1;
}

function remove(btn) {
  var row = btn.parentNode.parentNode;
  var removed = document.getElementById("removed");

  row.parentNode.removeChild(row);

}

function post(btn) {
  var row = btn.parentNode;
  row.parentNode.style.backgroundColor = "Green";
  btn.setAttribute("disabled", "true");
  btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}

label {
  width: 100px;
  display: inline-block;
}

table,
th,
td,
tr,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

table td {
  text-align: center;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>

<body>
  <div>
    <div>
      <label for="Title">Title</label>
      <input type="text" id="title">
    </div>
    <div>
      <label for="Author">Author</label>
      <input type="text" id="author">
    </div>
    <div>
      <label for="content" id="contentlabel">Content type</label>
      <input type="radio" name="content" value="Free" >Free
      <input type="radio" name="content" value="Paid" >Paid
    </div>
  </div>
  <div>
    <input type="button" value="Add" onclick="addToTable(); counter();">
  </div>


  <div>
    <h1>Number of elements<span id="counterForElements">0</span></h1>

  </div>
  <div>
    <table id="output">
      <th style="width:40%;">Title</th>
      <th style="width:40%;">Author</th>
      <th style="width:10%;">Type</th>
      <th style="width:10%;">Button</th>
    </table>
  </div>
  <div>
    <h1>Removed elements</h1>
    <table id="removed">

    </table>
  </div>


</body>

</html>

CodePudding user response：

Your counter() function is not properly treating the innerHTML property as an integer. Here is a fix:

function counter() {
  var counter = document.getElementById("counterForElements");
  counter.innerHTML = parseInt(counter.innerHTML)   1;
}

Another way would be with a global variable:

let counter = 0;

function counter() {
  var counter = document.getElementById("counterForElements");
  counter.innerHTML =   counter;
}

If you want to keep track of removals, you would need to do so in remove():

function remove(btn) {
  // ... existing code goes here
  counter.innerHTML = parseInt(counter.innerHTML)   1;
  // or:
  counter.innerHTML = --counter;
}

Another way would be to count the number of <tr> elements in the table and store that in counter.innerHTML every time you add or remove a row.