the reason why Conflict between plugin and javascript function occured

Question

Few days ago I had to write code quickly and added the bad code below.

<td class="note_box_con" onclick="getElementsByTagName('a')[0].click();">

After then, when I tried to use Text editor plugin written by Javascript, I found

Text editor plugin and the function of DOM collide into each other

Now I know what was the problem and solve it. But I cannot understand what kind of risk getElementsByTagName('a')[0].click(); has.

In my incomplete view, that code is just addEventlistener function().....

what kind of risk onclick="getElementsByTagName('a')[0].click();" has?

Answer 1

In my understanding, its a bad practice to do it this way. I would rather suggest you to use to fetch using classname or id.

If you are using some resource that adds anchor tags to your page, this will break your logic.

Following is a simulation:

var count = 0;
function addAnchor(){
  var div = document.getElementById("content");
  var str = "<a href='#'>" + count++ + "</a>";
  div.innerHTML = str + div.innerHTML;
}

document.getElementsByTagName("a")[0].addEventListener("click", function(){
  console.log(this.innerHTML);
  return false;
})

<div id="content">
  <a href="#">Test</a>
</div>

<button onclick="addAnchor()">Add Link</button>
<a onclick="document.getElementsByTagName('a')[0].click()"> test </a>

Also, if there is a change in DOM structure, your code will not work properly. Best use a proper selector that uniquely identifies the element.