TXT

<style>
*:focus { outline: none; }
</style>


<div onclick="zoomIn()">zoom in</div>
<script>
 const container = document.querySelector('.page_wrapper');
 const zoomLevels = [1, 1.25, 1.5, 1.75, 2];  function zoomIn() {
   const currentZoom = parseFloat(container.style.transform.replace(/[^0-9.,]+/g, ""));
   const zoomIndex = zoomLevels.indexOf(currentZoom);    if (zoomIndex < zoomLevels.length - 1) {
     const nextZoom = zoomLevels[zoomIndex + 1];
     container.style.transform = `scale(${nextZoom})`;
   }
 }  function zoomOut() {
   const currentZoom = parseFloat(container.style.transform.replace(/[^0-9.,]+/g, ""));
   const zoomIndex = zoomLevels.indexOf(currentZoom);    if (zoomIndex > 0) {
     const prevZoom = zoomLevels[zoomIndex - 1];
     container.style.transform = `scale(${prevZoom})`;
   }
 }
</script>

<button onclick="zoomIn()">Zoom in</button>
<button onclick="zoomOut()">Zoom out</button>

<script>
 const container = document.querySelector('.page_wrapper');
 const zoomLevels = [1, 1.5, 2];  function zoomIn() {
   const currentZoom = parseFloat(container.style.transform.replace(/[^0-9.,]+/g, ""));
   const zoomIndex = zoomLevels.indexOf(currentZoom);    if (zoomIndex < zoomLevels.length - 1) {
     const nextZoom = zoomLevels[zoomIndex + 1];
     container.style.transform = `scale(${nextZoom})`;
   }
 }  function zoomOut() {
   const currentZoom = parseFloat(container.style.transform.replace(/[^0-9.,]+/g, ""));
   const zoomIndex = zoomLevels.indexOf(currentZoom);    if (zoomIndex > 0) {
     const prevZoom = zoomLevels[zoomIndex - 1];
     container.style.transform = `scale(${prevZoom})`;
   }
 }
</script>