title: Why onclick event doesn't work in neither JavaScript nor Thymeleaf?
body: <p>I'm trying hit the button to add a new dynamic row in the table. My project construction is spring boot, I put the HTML in the templates. I try to use "onclick" function to jump to javascript, however, it doesn't work either "th:onclick" or "onclick".</p>
  
  <pre><code>&lt;td&gt;&lt;button onclick="add(this)"&gt;Add&lt;/button&gt;&lt;/td&gt;
  &lt;td&gt;&lt;button th:onclick="'javascript:add(this)'"&gt;Add&lt;/button&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Either of these two methods is noticing me an error "Uncaught ReferenceError: add is not defined"</p>
  
  <p>The following code is my js, I think I defined the function add(). Why doesn't it work?</p>
  
  <pre><code>function add(object) {
  var tr = object.parentNode.parentNode;
  var row = tr.rowIndex;
  var tab = document.getElementById("tableA");
  tab.style.cssText="width:80%; height: 100%; table-layout:fixed";
  var objRow1 = tab.insertRow(row++);
  
  var objCell;
  var objCell1;
  var objCell2;
  var objCell3;
  var objCell4;
  var objCell5;
  var objCell6;
  var objCell7;
  objCell = objRow1.insertCell(0);
  objCell.innerHTML='&lt;input type="text" id="SystemName" name="SystemName" value=""/&gt;';
  objCell.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell1 = objRow1.insertCell(1);
  objCell1.innerHTML='&lt;input type="text" name="IP" id="IP" value=""/&gt;';
  objCell1.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell2 = objRow1.insertCell(2);
  objCell2.innerHTML='&lt;input type="text" name="SystemLevel" id="SystemLevel" value=""/&gt;';
  objCell2.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell3 = objRow1.insertCell(3);
  objCell3.innerHTML='&lt;input type="text" name="Ownera" id="Ownera" value=""/&gt;';
  objCell3.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell4 = objRow1.insertCell(4);
  objCell4.innerHTML='&lt;input type="text" name="Ownerb" id="Ownerb" value=""/&gt;';
  objCell4.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell5 = objRow1.insertCell(5);
  objCell5.innerHTML='&lt;input type="text" name="SystemDesc" id="SystemDesc" value=""/&gt;';
  objCell5.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell6 = objRow1.insertCell(6);
  objCell6.innerHTML='&lt;input type="text" name="SystemDate" id="SystemDate" value=""/&gt;';
  objCell6.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  objCell7 = objRow1.insertCell(7);
  objCell7.innerHTML='&lt;input type="text" name="Recorder" id="Recorder" value=""/&gt;';
  objCell7.style.cssText="width:auto; height:auto; word-wrap: break-word;white-space: nowrap;"
  </code></pre>
  
  <p>}</p>