Inline-Javascript in externe Datei übertragen

Question

Ich habe eine HTML-Seite mit Inline-Javascript für den Menülink. Da es sich um eine Chrome-Erweiterung handelt, habe ich festgestellt, dass Inline-JavaScript verboten ist. Könnte jemand mir helfen, das Skript zu ändern, damit es funktioniert? Ich fand diesen Code in einem Forum für Tabs, aber ich möchte es jetzt für meine Chrome-Erweiterung verwenden. Also im Grunde möchte ich Javascript externe Datei das OnClick Javascript aus <a> Tag und Transfer entfernen

Danke

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

versuchen, etwas wie folgt aus:

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)) 
    }); 
}