custom Zoom button

[Paco]

Hello all!   I'm trying to create custom zoom buttons within my Webapp.

I've created simple Div/Buttons with HTML/CSS and would like to simply click and zoomin/zoomout at the standard MapView 'zoom' levels.

the usual code has been added but I will need to reference the click on the Button and zoom the view.  any help?  thanks! Screenshot included.  Javascript 4.x

const view = new MapView({
container: "viewDiv",
map: map,
center: [-100.0, 40.0], // longitude, latitude
zoom: 3,
padding: {
left: 45
}
});

<div id="myleftnav" class="leftnav">
<button type="button" class=zoominbtn>+</button>
<button type="button" class=zoomoutbtn>-</button>
</div>

[Paco]

Okay,  im going to add a bit more information.  I'm thinking this 'may' be a structure/scope issue within the HTML/js because im having trouble finding the "view".   keep getting errors.. I know it's there, but I can't seem to access it.    again,  just trying to add a 'button' and have it zoom in just like the standard ESRI ui zoom controls.

anyways,  here's the important bits of what ive got and hoping you'all can help!

const view = new MapView({
container: "viewDiv",
map: map,
center: [-100.0, 40.0], // longitude, latitude
zoom: 3,
padding: {
left: 45
}
});

<script>

function zoomin() {
document.getElementById('zoominbtn')
console.log('console log')
var n = view.zoom + 1;
view.zoom = n;
};
</script>

<button id="zoominbtn" class=zoominbtn onclick="zoomin()">
<img src="images/zoom-in-svgrepo-com.svg"width="24" height="24"></button>

[Paco · Accepted solution]

I'll answer my own question 😉 after a several days of trial and error,  a custom zoom button:

// Navigation //

document.getElementById("zoominbtn").addEventListener('click', function(){

  console.log("zoom in")

  var n= view.zoom + 1;

  view.zoom = n

  });