Transfer inline javascript to external file

Question

I have an html page with inline javascript for the menu link. As it's a chrome extension, I found that inline javascript is forbidden. Could someone help me modify the script to make it works? I found this code in a forum for tabs but I want now to use it for my chrome extension. So basically I want to remove the onclick javascript from <a> tag and transfer to javascript external file

Thank you

HTML

    <div>
        <ul class="tab" align="center">

          <li>
            <a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Menu1')">


              <img class="icon icons8-Marker-Pen" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADRUlEQVRoQ+2Y30sUURTHz5mRyKIUCwIhf8BI9ItWd92mH9BKtfnSuvUPuPbUo0/1qBRBb5VPPeWu0HMbPRqopLii4vpU4Ib5HmVkKEvriVFG1mlm7p27dxyFnee5Z76f8z333LkH4YA/eMD1QxUgaAerDsh0YGG5M7RZUt8RwDdV3bjX3ppfZcXfNw5si68ZA4B6QzQR5NWa9S4WxL4AmCtcSSLAsCnezDoPROAA8wU9BYCGeNuHBREoAEs8jxOBAcwV9DQC9rI2KQsiEACv4ncggMYjWq6rHHpPARaWQ/WbpcMvADDFm3nLeythbbolEABDfOlv7RgihETEE9AvVS3F2ltn83sOUKl4Q7BC1NXelhu3wvteQubpCoC7rPfmAvWFtVzabo2vANbT1ZvonbdfhbXpfqe1vgHIEE9AmYiWc93wvgDwHlCujhAthttyzA0vHUCWeKVmI8b6kTMSIBVgfkkfBMQBwVrfWubULn3fA6Kna7kwr+KlOfAsG33efUF9XEnmt9c6t0vfHHj4Rk8DQu+JozR5v0O5Lg7hXXzFDpjiTdGiEDztUroDVvGiEATwPqJNJ0WdE+pCke5krPHc76eNF//YlkzrSZi4dRZvMEURLfK2S6kOXL6TyAJgz6nza5NOEOFmmupoUq65QKwo6nqIp9e7JcKzA3p3soWIls2gzVd/TjQ0FW2z7QQh0i6lORCNJwbRclidiX+fOtJQss22HYTTrzGz5Gxe8OxANN6zigh11lj8EGLtUooDnbfvphRFcRyBMCFO48dwW25QJNNSAKLxRB4RL7kJcIQgyLx+4P5rLALGXULReCKNyDcG+Q/CJ/HcJ7EX8WYWdyB8FM8FwKp7N9u1mz8G3j769ESkNHjXMEvIuKBkRo4Pz8zU8sZcIaJ0sai8zI9nmeNx3qBCm7j8dpUZOQZuEEQ0YQifHf1gOz2oVKhnALuroR0EES0SKanZ0eyugZNfgq1xbUvI7V5bDmGILxaV2F6UiicH5pf0PLj0+6Ghuq+fvxxaC1q8axdaWNJjJYSUdQRuXj5CsWR9kJk3HWF2oa2J8mZtCgj6aXu8LTpZ9mVbMAF8+arEoFUAickUClV1QChtEhf9A6QLgECuLS48AAAAAElFTkSuQmCC" width="20" height="15">

            </a>
          </li>

          <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Menu2')"><i class="fa fa-pencil" aria-hidden="true"></i></a></li>

          <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Menu3')"> T </a></li>

          <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Menu4')">Print</a></li>

          <li><a href="javascript:void(0)" class="tablinks" onclick="openTab(event, 'Menu5')"><i class="fa fa-cog fa-lg" aria-hidden="true"></i></a></li>

        </ul>
      </div>



<div id="Menu1" class="tabcontent">

Tab1 content

</div>

<div id="Menu2" class="tabcontent">

Tab2 content

</div>

<div id="Menu3" class="tabcontent">

Tab3 content

</div>

<div id="Menu4" class="tabcontent">

Tab4 content

</div>

<div id="Menu5" class="tabcontent">

Tab5 content

</div>

CSS

    ul.tab {
    list-style-type: none;  
    overflow: hidden;
   /* background-color: #f1f1f1;*/
    padding-top: 5px;
    padding-left: 25px;
}

/* Float the list items side by side */
ul.tab li {
  float: left;
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 5px;

}

/* Style the links inside the list items */
ul.tab li a {
    display: inline-block;    
    text-align: center;
    text-decoration: none;
    transition: 0.3s;

}

/* Change background color of links on hover 
ul.tab li a:hover {
    background-color: #ddd;
}*/

/* Create an active/current tablink class */
/*ul.tab li a:focus{
    background-color: tomato;
    color: #fff;
    border:none;
}*/

.tab li a.active {
    background-color: #c30a0a;
    color: #fff;
    border:1px solid #c30a0a;
    border-radius: 5px;
    text-shadow:1px -1px 5px #000;
}

/* Style the tab content */
.tabcontent {
    background: #fff;
    display: none;
    padding: 20px 12px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

Javascript

    function openTab(evt, linkName) {
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none";
    }
    tablinks = document.getElementsByClassName("tablinks");
    for (i = 0; i < tablinks.length; i++) {
        tablinks[i].className = tablinks[i].className.replace(" active", "");
    }
    document.getElementById(linkName).style.display = "block";
    evt.currentTarget.className += " active";
}

Answer 1

Try something like this:

var elements = document.querySelectorAll(selector);

for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    element.addEventListener("click", function(e) {
      openTab(e, 'Menu'+(i+1))
    });
}