I have a sidemenu on a webpage with icons for buttons.
I wish to use these custom buttons instead of the tools on the modebar.
How can I code this in Vanilla JavaScript?
How can I call the functions (used by the icons on the modebar) via the icons on my sidemenu?
Here is the HTML code.
<div class="sidemenu">
<ul class = "sidemenu-tools">
<li><button><img src="icons/zoom.svg" class="tool" id="zoom_button"></button></li>
<li><button><img src="icons/zoom-out.svg" class="tool2" id="zoom_out_button"></button></li>
<li><button><img src="icons/undo.svg" class="tool" id="undo_button"></button></li>
<li><button><img src="icons/redo.svg" class="tool" id="redo_button"></button></li>
<li><button><img src="icons/reset.svg" class="tool2" id="reset_button"></button></li>
<li><button><img src="icons/save.svg" class="tool3" id="save_button"></button></li>
</ul>
<ul class="sidemenu-others">
<li><button><img src="icons/watchlist_toggle.svg" class="tool" id="watchlist_toggle"></button></li>
<li><button><img src="icons/user.svg" class="tool"></button></li>
</ul>
</div>
Here is one of my event listeners on JavaScript for reference.
const zoomButton = document.getElementById('zoom_button');
const zoomButtonHandler = function(event) {
console.log("Zoom Button Pressed");
};
zoomButton.addEventListener('click', zoomButtonHandler);