如何设置用户可以创建的表行数的限制？

Question

In my html, I have a div that is 300px long. In this div, there is a input, button and a table. The input ID is "toDo" and the button id is "addToDo". However, I would like to limit the number of todos that can be added, because after many, it exceeds the 300px height and continues to add rows.

var dailyTasks = document.getElementById("ToDo");
var toDoSpace = document.getElementById("toDospace");
document.getElementById("addToDo").addEventListener('click', function addToDo()
{

 var aToDo = document.getElementById("newToDo").value;
  ToDos.push(aToDo);
  var row = document.createElement("tr");
  toDoSpace.appendChild(row);
  var cell= row.insertCell(0);
  cell.innerHTML =  ToDos[0] +  "<div class ='counter'></div>";

 //this did not work 
  if(document.getElementsByTagName("tr") == 5)
  {

    cell.innerHTML = "too many TODos";
  }

});

Answer 1

Change this line:

if(document.getElementsByTagName("tr") == 5)

to:

if(document.getElementsByTagName("tr").length == 5)

getElementsByTagName() returns an array of elements, and to check how many they are, you need to check the .length property of that array.

Updated:

HTML:

<div id="ToDo">
  <h2>Daily Tasks</h2>
  <input id="newToDo" />
  <button id="addToDo">add ToDo</button>

  <table id="toDospace"></table>
  <div id="message"></div>
</div>

Javascript:

var toDoSpace = document.getElementById("toDospace");

document.getElementById("addToDo").addEventListener('click', function addToDo()
{
    var aToDo = document.getElementById("newToDo").value;

    if(document.getElementsByTagName("tr").length == 10)
  {
        document.getElementById('message').innerHTML = 'To many todos!';  
  }
  else if (aToDo === '')
  {
    document.getElementById('message').innerHTML = 'Cannot be empty!';
  }
  else
  {    
    var row = document.createElement("tr");
    toDoSpace.appendChild(row);
    var cell= row.insertCell(0);
    cell.innerHTML =  aToDo +  "<div class ='counter'></div>";      
    document.getElementById("newToDo").value = '';
        document.getElementById('message').innerHTML = '';
  }
});

Working fiddle example:

https://jsfiddle.net/rwt9302c/2/