Con un código más moderno, quedaría así.
El botón HTML:
<input type="button" value="Imprimir" class="printbutton">
El Javascript:
El script Javascript para definir el evento click sobre el botón, donde usaremos la clase "printbutton" para darle el comportamiento a todos los botones de la página que tengan esa clase.
document.querySelectorAll('.printbutton').forEach(function(element) {
element.addEventListener('click', function() {
print();
});
});
Ventajas de esta solución de botón imprimir
Esta solución permite algunas mejoras:
- Separamos el Javascript del HTML, por tanto, este script se adaptaría a cualquier documento HTML
- Podemos tener varios botones de imprimir página web, tantos como elementos con la clase css "printbutton" pongamos.
- Podemos tener varios tipos de botones y no necesariamente botones, podrían ser también imágenes, por ejemplo:
<img src="https://via.placeholder.com/36" alt="imprimir" class="printbutton">
En este caso y como extra, convendría ponerle un estilo CSS a la imagen para que se vea que se puede pulsar.
<style>
.printbutton {
cursor: pointer;
}
</style>
Ejemplo completo de página con botones para impresión
La página donde he puesto este ejemplo en funcionamiento se puede ver aquí:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.printbutton {
cursor: pointer;
}
</style>
</head>
<body>
<h1>Imprimir...</h1>
<input type="button" value="Imprimir" class="printbutton">
<p>Lorem ipsum.......</p>
<p>
<img src="https://via.placeholder.com/36" alt="imprimir" class="printbutton">
</p>
<script>
document.querySelectorAll('.printbutton').forEach(function(element) {
element.addEventListener('click', function() {
print();
});
});
</script>
</body>
</html>
Camila
412
16
25
5