Heres my code:
<div>
<a onclick="settings()">
<script type="text/javascript" src="popup.js">
<img src="icons/gear.png"
</a>
</div>
I wanna keep the icon for the button
You can create an EventListener which will listen when someone clicks on the anchor tag (<a></a>).
So to do this, first let's give our anchor a class name, for this example:
<a class="example">Click Me</a>
Now, in our javascript file, we need to select this element by its class name. To do that we need to:
myVariable)So:
var myVariable = document.querySelector('.example');
We created a variable and named it myVariable. We use document.querySelector('.example') to select our anchor element by its class name and assign it to our variable.
Now we need to create an EventListener:
myVariable.addEventListener('click', () => {
// some code to be executed
})
Here you can see that we used the variable followed by a dot (.) and addEventListener().
Q: Why did we use the variable name?
A: We use the variable name before .addEventListener because we actually want to "listen" when someone executes a specific event on our anchor tag, in this case the "click" event.
Note: You should never put inside some div element.>ou always add them to the bottom of the page, before the closing </body> tag.
So it should look like this:
</body>
<!--Some Code-->
<script src="example.js"></script>
</body>