<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<style>
.selected {background-color:#808080;border-color:#808080;}
</style>
</head>
<body>
<p>
<input type="button" value="x1" class="selected">
<input type="button" value="x1.5">
<input type="button" value="x1.8">
<input type="button" value="x2">
</p>
<p>
<img src="https://image.ibb.co/fUL9nS/wolf.png" id="img">
</p>
</body>
</html>
<script>
const inputs=document.querySelectorAll("input");
for(input of inputs) {
// Definimos el evento click para cada botón
input.addEventListener("click",function(e) {
// Quitamos los estilos a cada boton
for(input of inputs) {
input.className="";
}
// Ponemos el estilo de "selected" al botón seleccionado
e.srcElement.className="selected";
// Ponemos el style de zoom a la imagen
// Eliminamos el primer elemento que es la x (Ejemplo: x1.8)
document.getElementById("img").style.zoom=e.srcElement.value.substr(1);
});
}
</script>